Как через js записать стиль css?

104

17 февраля 2021, 00:50

Я пробовал через document.write() записать в тег <style></style> стиль css, но не вышло. Как еще можно попробовать?

Answer 1

Сочувствуем.

function addStyle() { 
  var s = document.createElement("style"); 
  s.textContent = ".two{background:lightgreen;}"; 
  document.body.appendChild(s); 
}

.one { 
  border: 1px solid black; 
  display: inline-block; 
  width: 200px; 
  height: 100px; 
}

<div class="one two"></div> 
<br/> 
<button onclick="addStyle()">Click</button>

Answer 2

let js = document.getElementById('js-styles'); 
 
js.append( ` .test {color: orange; font-size: 25px;}` ); // Добавление класса 
// С такими кавычками можно свободнее писать стили из серии content: "...";  
 
js.textContent = js.textContent.replace(/\.bubu\s*{.*?}/, ""); // Удаление класса

<style id="js-styles"> .bubu { color: red; } .dudu { color: green; }</style> 
 
<p class="bubu">Тест - bubu</p> 
<p class="dudu">Тест - dudu</p> 
<p class="test">Тест - test</p>

Значение регулярки можно узнать здесь → https://regex101.com/r/LuMoWN/1