Добавить параметр в 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') |
Да, так и сделал.
Еще такой вопрос. Чтобы не лепить новую тему, напишу здесь. Скажите, можно ли прилепить к этому скрипту функцию, в которой, при нажатии/наведении на один из этих блоков появлялась тень у основного контейнера. Или может сделать селект, в котором можно будет выбрать опцию с одной из этих теней и они будут менять тень основного блока. Так, наверное, даже проще и лучше будет. https://jsfiddle.net/d1pj6k1m/ Заранее спасибо. |
Цитата:
|
Рони, прошу прощения, не верно сформулировал. Я пытаюсь связать эти блоки с основным контейнером, чтобы при выборе одного из них в селекте(или наведении на блоки), менялась тень основного контейнера. Набросок кода https://jsfiddle.net/d1pj6k1m/ Что-то вроде демонстрации теней на основном контейнере.
|
Как-то так?
<style>
div {
display: inline-block;
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
}
.block-1,
.block-2,
.block-11,
.block-101,
.block-301 {
box-shadow: 10px 20px 30px gray;
height: 100px;
}
.content {
display: block;
width: 96%;
height: 150px;
background: #fafafa;
}
</style>
<div class="content">
<div class="blocks block-1">1</div>
<div class="blocks block-2">2</div>
<div class="blocks block-11">11</div>
<div class="blocks block-101">101</div>
<div class="blocks block-301">301</div>
</div>
<script>
[].forEach.call(document.querySelectorAll('.block-1'), function(node) {
var bsh = getComputedStyle(node).boxShadow;
node.style.boxShadow = "inset "+bsh;
});
[].forEach.call(document.querySelectorAll('.blocks'), function(node) {
node.onmouseover = function() {
document.querySelector('.content').style.boxShadow = getComputedStyle(node).boxShadow;
}
node.onmouseleave = function() {
document.querySelector('.content').style.boxShadow = "";
}
});
</script>
|
Не совсем. Еще раз прошу прощения, не верно сформулировал задачу, так как не представляю как это лучше сделать. Сам запутался.
С предыдущим скриптом разобрался. Задача теперь в другом. Вот код https://jsfiddle.net/q2jgymq8/ В нем есть основной контейнер, блок с опциями и блоки, у которых у каждого свое свойство (в данном случае тень). Можно ли сделать так, чтобы при выборе какой-нибудь опции, появлялась/менялась тень у основного контейнера, в соответствии с тенью блоков? |
madeas,
Изменил пример в пост№14 |
С селектором
<style>
div {
display: inline-block;
width: 100px;
height: 100px;
margin: 20px;
text-align: center;
line-height: 100px;
}
.block-1 {
box-shadow: 1px 12px 19px gray;
height: 100px;
}
.block-2 {
box-shadow: 1px 12px 19px gray;
height: 100px;
}
.block-11 {
box-shadow: 0px 2px 30px gray;
height: 100px;
}
.block-101 {
box-shadow: 1px 20px 90px gray;
height: 100px;
}
.block-301 {
box-shadow: 10px 2px 190px gray;
height: 100px;
}
.content {
display: block;
display: flex;
display: -webkit-flex;
width: 96%;
height: 150px;
background: #fafafa;
}
.block-select {
border: 0;
outline: none;
}
</style>
<div class="content">
<p>
<select size="6" multiple class="block-select">
<option disabled>Выберите блок</option>
<option>block-1</option>
<option selected>block-2</option>
<option>block-11</option>
<option>block-101</option>
<option>block-301</option>
</select>
</p>
<div class="block-1">1</div>
<div class="block-2">2</div>
<div class="block-11">11</div>
<div class="block-101">101</div>
<div class="block-301">301</div>
</div>
<script>
[].forEach.call(document.querySelectorAll('.block-1'), function(node) {
var bsh = getComputedStyle(node).boxShadow;
node.style.boxShadow = "inset "+bsh;
});
document.querySelector('select').onchange = function() {
var node = document.querySelector("." + this.value);
document.querySelector('.content').style.boxShadow = getComputedStyle(node).boxShadow;
};
</script>
|
Да. Спасибо большое. А можно реализовать такое при помощи этого? Задействовать те же блоки, но не связывая скрипты, которые мы брали ранее.
<select size="6" multiple class="block-select"> <option disabled>Выберите блок</option> <option value=".block-1">block-1</option> <option selected value=".block-2">block-2</option> <option value=".block-11">block-11</option> <option value=".block-101">block-101</option> <option value=".block-301">block-301</option> </select> |
madeas,
Пост17 видели? |
Спасибо большое! Можно закрывать.
|
var style = document.createElement('style');
style.textContent = '.block1{box-shadow:inset ' + window.getComputedStyle(document.querySelector('.block-1')).boxShadow + ' !important}';
document.head.appendChild(style);
|
| Часовой пояс GMT +3, время: 20:29. |