Можно так:
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(),
У меня получилось в итоге вот так https://jsfiddle.net/cog95xb1/ но скрипт не захватывает сами номера блоков (-1, -2 и т.д.), так как класс bShadow прописан нами вручную. Как это подправить? И второй вопрос, как вывести последующие нажатые блоки таким же образом? |
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>
|
madeas,
1. Вот вместо вручную прописанного класса - e.target.classList[1] Проверено, работает. Берет 2-й по счету класс, то есть как раз bShadow-1, bShadow-2 и т.д. 2. Вместо = ставим += . Типа так:
result.innerHTML += '.bshadow{<br>' +
Правда в этом случае если два раза нажать на один блок, добавится два одинаковых кода и надо еще это обойти. |
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>}';
}
}
|
result.innerHTML += e.target.classList[1]+'{<br>' +
|
j0hnik,
в таком виде пропадает точка и перенос строки перед классом |
поправил
result.innerHTML +=
'<br>.' +e.target.classList[1]+'{<br>' +
|
void(), j0hnik, рони, спасибо за помощь!
Вышло вроде не плохо https://madeas.github.io/box-shadows. При нажатии на кнопку "show in blocks" появляется возможность точной настройки странички и небольшой генератор из кода, собранного здесь. Не знаю, на сколько полезная вещь получилась, но надеюсь, кому-нибудь пригодится. Еще раз, большое спасибо за помощь и профессионального развития! |
Ребят, подскажите, а можно ли к этому результату добавить кнопку, чтобы при помощи js пользователи могли генерировать свой файл из выбранных стилей? в формат box-shadows.css или txt
Или здесь уже нужен php обработчик? |
| Часовой пояс GMT +3, время: 11:49. |