Вывести свойства в отдельный контейнер
Добрый день.
Подскажите, как при помощи скрипта вывести в отдельный div контейнер только свойство box-shadow одного из блоков при нажатии? их 4 https://jsfiddle.net/5usu50ep/ Т.е. я нажимаю на 1 и 2, а в контейнере выводятся класс и свойства тени каждого контейнера. |
Возможно, так даже будет легче https://jsfiddle.net/t6Lo1je7/
|
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>
|
Вариант без 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>
|
Void, без библиотеки не выводит, почему-то.
А можно сделать вывод только класса bshadow, без .Block, где содержимое класса = выведенному в результат, со скобками и кроссом на новой строке? Вроде генератора |
Цитата:
Цитата:
text = this.className.match(/bS\S+/)[0] + " " + $(this).css("box-shadow")
Цитата:
|
Ваш работает, void здесь не работает, может у меня проблема, не вижу результат просто
|
madeas,
а какой браузер? |
madeas,
1. Должно работать, проверил даже в IE. В демонстрации выше, вывод результата просто не помещается, надо прокрутить окошко (iframe), там ниже выводится. 2. Не понимаю, чего вы хотите добиться... Так?
result.innerHTML = '.bshadow { ' + styleItem.boxShadow + ' }';
|
рони,
Яндекс. Работает, видимо заглючил. 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, чтобы он добавлялся или убирался из поля результата. Чтобы в конечном итоге получить несколько классов и их можно было скопировать. |
| Часовой пояс GMT +3, время: 10:41. |