我正在寻找一种方法来添加/更改某些属性的所有标签的某种类型后,页面加载。
我找到了两种方法。但是由于我不明白的原因,结果是不同的。
方法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
所以我想知道为什么这两种方法的结果是不同的,我也很高兴了解其他方法来改变一个类型的所有标签。
3条答案
按热度按时间vql8enpb1#
<style>
标记并设置其属性,就像您在<style>
标记中写入css或通过<link>
输入css一样style
属性,该属性也是W3C标准,但作用域仅限于该标记,并且具有语法限制(不能使用:hover
、:focus
等选择器)第二种方法比第一种方法快,并且具有更高的优先级,并且没有关于
scoped
的错误,这在javascript中是优选的blmhpbnm2#
这里,方法1使用
innerHTML
向文档添加新的样式标记并应用CSS样式。页面上与选择器div
匹配的所有标记都将具有使用此技术的样式。但是,根据需要多少样式,此技术可能会导致页面加载速度变慢。然后,另一种方法是通过循环选择页面上每个div元素的背景和颜色属性,这种方法更快,因为它不需要等待新样式加载。
因此,只需稍微修改一下第二个方法,就可以使用另一个方法:
不过,您也可以使用Jquery来实现快捷执行:
huus2vyu3#
不同之处在于优先级。方法2(循环/内联)的内联结果与方法1(
<style>
作为最后一个子代)相同,方法1是通过添加!important
规则来实现的,因为优先级增加了。如下所示:这个简单的例子演示了如何轻松地完全恢复所有更改,并保留原始HTML: