Динамически стиль определенного тега в javascript

Question

Для стиля тела вы можете просто сделать document.body.style.color = "white", например, но если я хочу сделать то же самое с pre -tag, как мне это сделать?

Answer 1

Лучшим решением было бы изменить стили с помощью класса. Обычно так работают темы. Вы устанавливаете класс для тела, который изменяет то, что вы хотите изменить.

window.setTimeout( function () {
  document.body.classList.add("luckyGreen")
}, 4000)

window.setTimeout( function () {
  document.body.classList.remove("luckyGreen")
}, 8000)

pre {
  background-color: #CCC;
}


body.luckyGreen {
  color:green;
}
body.luckyGreen pre {
  background-color: #CFC;
}

 Hello there

X

 Hello there

Y

 Hello there

Но по какой-то причине вы хотите изменить класс, вы можете написать новое css правило.

function addRule() {
  var styleEl = document.createElement('style');
  document.head.appendChild(styleEl);
  var styleSheet = styleEl.sheet;
  var ruleStr = "pre { background-color: red; }"
  styleSheet.insertRule(ruleStr, styleSheet.cssRules.length);
}


window.setTimeout(addRule, 4000)

 Hello there

X

 Hello there

Y

 Hello there

Answer 2

В этом случае вам нужно использовать getElementsByTagName следующим образом:

var tags = document.getElementsByTagName("pre");
for(var i = 0; i < tags.length; i++)
     tags[i].style.color = "white";

Answer 3

Вы можете создать классы в вашем CSS, затем переключать их, добавлять / удалять их или вручную делать подобные вещи.

let v3 = document.getElementsByTagName("pre")[2];
v3.classList.add('three');

let pre = document.getElementsByTagName("pre")[0];
pre.classList.add('one');

let preAll = document.getElementsByTagName("pre");
preAll[3].classList.add('four');

let i;
for (i = 0; i < preAll.length -1; i++) {
  preAll[i].style.backgroundColor = "#ddddff";
}

pre.one {
  color: red;
  font-weight: bold;
}

pre.two {
  color: blue;
  font-weight: 2;
}

pre.three {
  background-color: #ddffdd;
}

pre.four {
  color: green;
  background-color:#ffddff;
  font-weight: bold;
}

  pretty pre

pretty pre

pretty pre

pretty pre