Форум

madeas · #1 (**permalink**) 21.05.2018, 17:40

Добрый день.

Подскажите, как при помощи скрипта вывести в отдельный div контейнер только свойство box-shadow одного из блоков при нажатии? их 4 https://jsfiddle.net/5usu50ep/ Т.е. я нажимаю на 1 и 2, а в контейнере выводятся класс и свойства тени каждого контейнера.

madeas · #2 (**permalink**) 21.05.2018, 17:53

Возможно, так даже будет легче https://jsfiddle.net/t6Lo1je7/

рони · #3 (**permalink**) 21.05.2018, 18:17

madeas,
если макет разместить тут, ответы появятся оперативнее ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.flex {
  display: flex;
}
.block {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px;
  border: 0;
  background: #fff !important;
}
.block::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #fff;
}
.bShadow-1{-webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);-moz-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);}
.bShadow-2{-webkit-box-shadow:0 0 20px 0 rgba(150,150,150,.1);-moz-box-shadow:0 0 20px 0 rgba(150,150,150,.1);box-shadow:0 0 20px 0 rgba(150,150,150,.1);}
.bShadow-3{-webkit-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);-moz-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);box-shadow:0 20px 60px -10px rgba(0,0,0,.1);}
.bShadow-4{-webkit-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);-moz-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var b = $(".block"), out = $(".out"), text;
b.on("click", function() {
   text = this.className + " " + $(this).css("box-shadow")
   out.text(text)
})

});
  </script>
</head>

<body>
<div class="flex numbers">
  <input type="checkbox" class="block bShadow-1">
  <input type="checkbox" class="block bShadow-2">
  <input type="checkbox" class="block bShadow-3">
  <input type="checkbox" class="block bShadow-4">
</div>
<div class="out"></div>

</body>
</html>

void() · #4 (**permalink**) 21.05.2018, 18:25

Вариант без jQuery

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Пример</title>
</head>
<body>

	<div class="flex numbers">
		<input type="checkbox" class="block bShadow-1">
		<input type="checkbox" class="block bShadow-2">
		<input type="checkbox" class="block bShadow-3">
		<input type="checkbox" class="block bShadow-4">
	</div>

	<div class="result"></div>

	<script >
		window.onload = function(){
			var items = document.querySelectorAll('.flex input');
			var result = document.querySelector('.result');

			for(var i = 0; i < items.length; i++){
				items[i].addEventListener("click", getShadow);
			}

			function getShadow(e){
				var styleItem = getComputedStyle(e.target);
				result.innerHTML = styleItem.boxShadow;
			}
		}
	</script>

	<style type="text/css">
	.flex {
		display: flex;
	}
	.block {
		position: relative;
		width: 100px;
		height: 100px;
		margin: 20px;
		border: 0;
		background: #fff !important;
	}
	.block::after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #fff;
	}
	.bShadow-1{-webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);-moz-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);}
	.bShadow-2{-webkit-box-shadow:0 0 20px 0 rgba(150,150,150,.1);-moz-box-shadow:0 0 20px 0 rgba(150,150,150,.1);box-shadow:0 0 20px 0 rgba(150,150,150,.1);}
	.bShadow-3{-webkit-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);-moz-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);box-shadow:0 20px 60px -10px rgba(0,0,0,.1);}
	.bShadow-4{-webkit-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);-moz-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);}
</style>

</body>
</html>

madeas · #5 (**permalink**) 21.05.2018, 18:43

Void, без библиотеки не выводит, почему-то.
А можно сделать вывод только класса bshadow, без .Block, где содержимое класса = выведенному в результат, со скобками и кроссом на новой строке? Вроде генератора

рони · #6 (**permalink**) 21.05.2018, 19:00

Сообщение от madeas

Void, без библиотеки не выводит, почему-то.

здесь работает?

Сообщение от madeas

А можно сделать вывод только класса bshadow, без .Block,

можно

text = this.className.match(/bS\S+/)[0] + " " + $(this).css("box-shadow")

Сообщение от madeas

где содержимое класса = выведенному в результат, со скобками и кроссом на новой строке? Вроде генератора

не осилил

madeas · #7 (**permalink**) 21.05.2018, 19:01

Ваш работает, void здесь не работает, может у меня проблема, не вижу результат просто

рони · #8 (**permalink**) 21.05.2018, 19:06

madeas,
а какой браузер?

void() · #9 (**permalink**) 21.05.2018, 19:29

madeas,
1. Должно работать, проверил даже в IE. В демонстрации выше, вывод результата просто не помещается, надо прокрутить окошко (iframe), там ниже выводится.

2. Не понимаю, чего вы хотите добиться... Так?

result.innerHTML = '.bshadow { ' + styleItem.boxShadow + ' }';

madeas · #10 (**permalink**) 21.05.2018, 19:41

рони,
Яндекс. Работает, видимо заглючил.

void(),
да, спасибо. Только хотел в более полном виде:

.bShadow-1 {
  -webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);
  -moz-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);
  box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);
}
.bShadow-2 {
  -webkit-box-shadow:0 0 20px 0 rgba(150,150,150,.1);
  -moz-box-shadow:0 0 20px 0 rgba(150,150,150,.1);
  box-shadow:0 0 20px 0 rgba(150,150,150,.1);
}

и при нажатии на нужный input, чтобы он добавлялся или убирался из поля результата. Чтобы в конечном итоге получить несколько классов и их можно было скопировать.

Форум

Справочник

Discord чат

Курсы javascript