21.05.2018, 19:42
|
 |
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
Можно так:
function getShadow(e){
var styleItem = getComputedStyle(e.target);
result.innerHTML = '.bshadow{<br>' +
'-webkit-box-shadow: ' + styleItem.boxShadow + '; <br>' +
'-moz-box-shadow: ' + styleItem.boxShadow + '; <br>' +
'box-shadow: ' + styleItem.boxShadow + '<br>}';
}
Последний раз редактировалось void(), 21.05.2018 в 20:08.
|
|
21.05.2018, 21:25
|
 |
Профессор
|
|
Регистрация: 13.04.2018
Сообщений: 232
|
|
void(),
У меня получилось в итоге вот так https://jsfiddle.net/cog95xb1/ но скрипт не захватывает сами номера блоков (-1, -2 и т.д.), так как класс bShadow прописан нами вручную. Как это подправить? И второй вопрос, как вывести последующие нажатые блоки таким же образом?
Последний раз редактировалось madeas, 21.05.2018 в 21:47.
|
|
21.05.2018, 21:49
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
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() {
function getShadow(e) {
var s = getComputedStyle(e).boxShadow;
return "{<br>" + "-webkit-box-shadow: " + s + "; <br>" + "-moz-box-shadow: " + s + "; <br>" + "box-shadow: " + s + "<br>}"
}
var b = $(".block"),
out = $(".out"),
text;
b.on("click", function() {
text = $.map(b.filter(":checked"), function(e) {
return "<br>" + e.className.match(/bS\S+/)[0] + getShadow(e)
});
out.html(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>
|
|
21.05.2018, 22:12
|
|
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
madeas,
1. Вот вместо вручную прописанного класса -
e.target.classList[1]
Проверено, работает. Берет 2-й по счету класс, то есть как раз bShadow-1, bShadow-2 и т.д.
2. Вместо = ставим += . Типа так:
result.innerHTML += '.bshadow{<br>' +
Правда в этом случае если два раза нажать на один блок, добавится два одинаковых кода и надо еще это обойти.
Последний раз редактировалось void(), 21.05.2018 в 22:14.
|
|
21.05.2018, 23:09
|
|
Профессор
|
|
Регистрация: 13.04.2018
Сообщений: 232
|
|
void(),
Поставил, работает. Обойти можно путем добавления в каждый input onClick="this.disabled=true"
типо вот так: <input type="checkbox" class="block bShadow-4" onClick="this.disabled=true; this.value='Sending…';">
но не совсем понял про замену вручную... подскажите, как должно выглядеть?
у меня скрипт получился такой
// выводим нажатые блоки в поле result
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 += '<br>.bshadow{<br>' +
'-webkit-box-shadow: ' + styleItem.boxShadow + '; <br>' +
'-moz-box-shadow: ' + styleItem.boxShadow + '; <br>' +
'box-shadow: ' + styleItem.boxShadow + ';<br>}';
}
}
|
|
21.05.2018, 23:13
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
result.innerHTML += e.target.classList[1]+'{<br>' +
|
|
22.05.2018, 09:03
|
|
Профессор
|
|
Регистрация: 13.04.2018
Сообщений: 232
|
|
|
j0hnik,
в таком виде пропадает точка и перенос строки перед классом
|
|
22.05.2018, 09:04
|
|
Профессор
|
|
Регистрация: 13.04.2018
Сообщений: 232
|
|
поправил
result.innerHTML +=
'<br>.' +e.target.classList[1]+'{<br>' +
|
|
22.05.2018, 12:11
|
|
Профессор
|
|
Регистрация: 13.04.2018
Сообщений: 232
|
|
void(), j0hnik, рони, спасибо за помощь!
Вышло вроде не плохо https://madeas.github.io/box-shadows. При нажатии на кнопку "show in blocks" появляется возможность точной настройки странички и небольшой генератор из кода, собранного здесь. Не знаю, на сколько полезная вещь получилась, но надеюсь, кому-нибудь пригодится.
Еще раз, большое спасибо за помощь и профессионального развития!
|
|
22.05.2018, 12:51
|
|
Профессор
|
|
Регистрация: 13.04.2018
Сообщений: 232
|
|
|
Ребят, подскажите, а можно ли к этому результату добавить кнопку, чтобы при помощи js пользователи могли генерировать свой файл из выбранных стилей? в формат box-shadows.css или txt
Или здесь уже нужен php обработчик?
|
|
|
|
