Форум

madeas · #1 (**permalink**) 13.05.2018, 19:07

Здравствуйте!
Я в 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>

j0hnik · #2 (**permalink**) 13.05.2018, 19:24

[].forEach.call(document.querySelectorAll('[class*="block-1"]'), function(node) {
	var bsh = getComputedStyle(node).boxShadow;
	node.style.boxShadow = "inset "+bsh;
});

рони · #3 (**permalink**) 13.05.2018, 19:25

madeas,

[].forEach.call(document.querySelectorAll('[class*="block-1"]'), function(node) {
       node.style.boxShadow = "inset " + getComputedStyle(node).boxShadow;
});

рони · #4 (**permalink**) 13.05.2018, 19:27

Сообщение от madeas

Можно ли при помощи js добавить еще один параметр внутрь css?

да, но проще так как вам предложили выше.

рони · #5 (**permalink**) 13.05.2018, 19:54

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>

madeas · #6 (**permalink**) 14.05.2018, 10:11

Спасибо, ребят. А можно сделать так, чтобы скрипт распространялся только на один блок? Если в стилях есть блоки вроде block-11, block-102 и все подобные, включающие в себя block-1***, они тоже получают параметр inset.

рони · #7 (**permalink**) 14.05.2018, 11:31

Сообщение от madeas

, включающие в себя block-1***, они тоже получают параметр inset.

чудеса!!!

madeas · #8 (**permalink**) 14.05.2018, 11:45

рони, странный юмор. Смотри, на страничке есть 5 блоков:

https://jsfiddle.net/w13efcL9/

и если я поставлю в скрипт значение блока 1, то скрипт будет применен и ко второму, так как тот включается в себя block-102

madeas · #9 (**permalink**) 14.05.2018, 11:49

Все, нашел проблему. Спасибо за помощь!

рони · #10 (**permalink**) 14.05.2018, 14:08

madeas,

document.querySelectorAll('.block-1')

Форум

Справочник

Discord чат

Курсы javascript