javascript 添加/更改类型的所有标记中的属性(奇怪的结果)

wfsdck30 于 2023-01-11 发布在 Java

关注(0)|答案(3)|浏览(122)

我正在寻找一种方法来添加/更改某些属性的所有标签的某种类型后，页面加载。
我找到了两种方法。但是由于我不明白的原因，结果是不同的。
方法1 -将样式标记添加为的最后一个子项。

var style = document.createElement( "style" );

style.innerHTML = `

div {
  background-color: black;
  color: white;
}

`;

document.documentElement.appendChild( style );

Result of style tag as last HTML child method
方法2 -获取该类型的所有标签，然后痛苦地更改其中一个。

var elems = document.body.getElementsByTagName("div");

for( let i = 0; i < elems.length; i++ ){

  elems[i].style.backgroundColor = "black";
  elems[i].style.color = "white";

}

Result of loop/in-line method
所以我想知道为什么这两种方法的结果是不同的，我也很高兴了解其他方法来改变一个类型的所有标签。

JavaScript

来源：https://stackoverflow.com/questions/75069352/adding-changing-properties-in-all-the-tags-of-a-type-odd-results

3条答案

按热度按时间

vql8enpb1#

第一种方法是创建<style>标记并设置其属性，就像您在<style>标记中写入css或通过<link>输入css一样
第二种方法使用每个标记的style属性，该属性也是W3C标准，但作用域仅限于该标记，并且具有语法限制（不能使用:hover、:focus等选择器）

第二种方法比第一种方法快，并且具有更高的优先级，并且没有关于scoped的错误，这在javascript中是优选的

赞(0）回复(0）举报 2023-01-11

blmhpbnm2#

这里，方法1使用innerHTML向文档添加新的样式标记并应用CSS样式。页面上与选择器div匹配的所有标记都将具有使用此技术的样式。但是，根据需要多少样式，此技术可能会导致页面加载速度变慢。
然后，另一种方法是通过循环选择页面上每个div元素的背景和颜色属性，这种方法更快，因为它不需要等待新样式加载。
因此，只需稍微修改一下第二个方法，就可以使用另一个方法：

var elems = document.querySelectorAll("div");
for( let i = 0; i < elems.length; i++ ){
  elems[i].style.backgroundColor = "black";
  elems[i].style.color = "white";
}

不过，您也可以使用Jquery来实现快捷执行：

$("div").css({
  "background-color": "black",
  "color": "white"
});

赞(0）回复(0）举报 2023-01-11

huus2vyu3#

不同之处在于优先级。方法2（循环/内联）的内联结果与方法1（<style>作为最后一个子代）相同，方法1是通过添加!important规则来实现的，因为优先级增加了。如下所示：

div {
  background-color: black !important;
  color: white !important;
}

这个简单的例子演示了如何轻松地完全恢复所有更改，并保留原始HTML：

<!DOCTYPE html>
<html>
<head>
<style>

  p {
    background-color: red;
  }

</style>
</head>
<body>

  <p>Text sample.</p>

  <p style="background-color: grey">Text sample.</p>

  <button onclick="test1()">Remove temporary changes</button>

</body>
<script>

  function test1() {
    document.getElementById("tempChanges").remove();
  }

</script>
<style id="tempChanges">

  p {
    background-color: green !important;
  }

</style>
</html>

赞(0）回复(0）举报 2023-01-11

我来回答

javascript 添加/更改类型的所有标记中的属性(奇怪的结果)

3条答案

相关问题

热门标签

最新问答