Как создать класс СSS с помощью JS?

Question

Есть файл js, в котором написан плагин, где используются CSS классы, к которым нет доступа. Как можно с помощью js добавить или изменить параметры этого класса?

card.addClass('card--collection');

Этот класс мне нужно изменить. Его значение width, которое прописано в СSS.

Answer 1

Команда может выглядеть так:

card.setAttribute('class', 'card--collection')

Answer 2

function changeBackground() {
  const s = document.createElement("style");
  s.innerText = ".block{background: lightgreen;}";
  document.body.appendChild(s);
}

.block {
  width: 100px;
  height: 50px;
  display: inline-block;
  border: 1px solid red;
  background: yellow;
}

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<br/>
<button onclick="changeBackground()">Change Background</button>

Answer 3

Если очень нужно отредактировать сами правила, то можно работать с CSSOM напрямую:

function test() {
  const i = [...document.styleSheets[0].cssRules].findIndex(e => e.selectorText === ".card--collection")
  const myClassRule = document.styleSheets[0].cssRules[i];
  myClassRule.style.width = "10.1em";
}

.card--collection {
  height: 5em;
  width: 19.1em;
  background-color: green;
}

<p class="card--collection"></p>
<p class="card--collection"></p>
<button onclick="test()">test</button>

БЛОГ НА HUSL

Как создать класс СSS с помощью JS?

Ответы (3 шт):