我想知道我们是否可以从javascript更改html中tag的css。我知道一种使用
document.getElementsbyTagName
获取带有该标签的所有元素并使用 for 循环来更改每个元素的 css 属性的方法...但是我正在寻找一种可能像这样更紧凑的方法 document.getElementsbyTagName("p").style.color = "red"
这是一个衬垫,少于这个是不可能的。
document.querySelectorAll("p").forEach(p => p.style.color = "red")
document.querySelectorAll("p").forEach(p => p.style.color = "red")
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
你可以创建一个辅助函数来为你做这件事,也许是这样的:
function doAll(tagName, action) {
document.querySelectorAll(tagName).forEach(action);
}
doAll("p", element => element.style.color = "red");
实现这一目标的一种方法是替换整个CSSStyleSheetObject
// css stylesheet object
const stylesheet = new CSSStyleSheet();
// adding stylesheet to CSSDOM
document.adoptedStyleSheets.push(stylesheet);
// lets suppose we have predifined stylesheet values
const styleValue1 = "body { font-size: 1.4em; } p { color: red; }";
const styleValue2 = "body { font-size: .4em; } p { color: blue; }";
// replacing stylesheet values
stylesheet.replaceSync(styleValue1);
stylesheet.replaceSync(styleValue2);
这在管理不同主题等内容时可能很有用。
MDN 文档参考:adoptedStyleSheets 属性