在 JavaScript 中动态设置某些标签的样式

Question

例如，要设置正文的样式，您可以简单地执行document.body.style.color = "white"此操作，但如果我想使用 -tag 执行相同的操作，pre我该怎么做？

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;

}

<pre>

 Hello there

</pre>

X

<pre>

 Hello there

</pre>

Y

<pre>

 Hello there

</pre>

但由于某种原因你想改变一个类，你可以编写一个新的 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)

<pre>

 Hello there

</pre>

X

<pre>

 Hello there

</pre>

Y

<pre>

 Hello there

</pre>

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;

}

<div class="container">

  <pre>pretty pre</pre>

  <pre>pretty pre</pre>

  <pre>pretty pre</pre>

  <pre>pretty pre</pre>

</div>