Добавить параметр в css
Здравствуйте!
Я в js не очень силен, поэтому вопрос к мастерам. Можно ли при помощи js добавить еще один параметр внутрь css? Поясню. Есть блок с классом .block-1, которому в стилях прописано свойство: box-shadow: 10px 20px 30px blue; Вопрос. Можно ли при помощи скрипта, не зная основных значений свойства (этих - 10px 20px 30px), задать еще параметр inset? Я могу сделать так:
[].forEach.call(document.querySelectorAll('[class*="block-1"]'), function(node) {
node.style.boxShadow = "inset 10px 20px 30px blue;"
});
но для этого мне придется задать значения целиком. А надо чтобы можно было делать не затрагивая их. Сейчас есть:
<style>
.block-1 {
box-shadow: 10px 20px 30px blue;
}
</stele>
<div class="block-1"></div>
Надо чтобы:
<style>
.block-1 {
box-shadow: inset 10px 20px 30px blue;
}
</stele>
<div class="block-1"></div>
|
[].forEach.call(document.querySelectorAll('[class*="block-1"]'), function(node) {
var bsh = getComputedStyle(node).boxShadow;
node.style.boxShadow = "inset "+bsh;
});
|
madeas,
[].forEach.call(document.querySelectorAll('[class*="block-1"]'), function(node) {
node.style.boxShadow = "inset " + getComputedStyle(node).boxShadow;
});
|
Цитата:
|
изменение правила css
madeas,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.block-1 {
box-shadow: 10px 20px 30px blue;
height: 100px;
}
</style>
<div class="block-1">123</div>
<script>
var style = document.styleSheets;
for (var i=0; i<style.length; i++) {
var rules = style[i].cssRules;
for (var k=0; k<rules.length; k++) {
if(rules[k].selectorText == ".block-1") {
var temp = rules[k].cssText.match(/\S+(?=:)/g)||[];
for (var n=0; n<temp.length; n++) {
var cs = temp[n];
if(cs == "box-shadow") rules[k].style[cs] += " inset"
}
}
}
}
</script>
</body>
</html>
|
Спасибо, ребят. А можно сделать так, чтобы скрипт распространялся только на один блок? Если в стилях есть блоки вроде block-11, block-102 и все подобные, включающие в себя block-1***, они тоже получают параметр inset.
|
Цитата:
|
рони, странный юмор. Смотри, на страничке есть 5 блоков:
https://jsfiddle.net/w13efcL9/ и если я поставлю в скрипт значение блока 1, то скрипт будет применен и ко второму, так как тот включается в себя block-102 |
Все, нашел проблему. Спасибо за помощь!
|
madeas,
document.querySelectorAll('.block-1') |
| Часовой пояс GMT +3, время: 04:08. |