从 javascript 更改标签样式

Question

我想知道我们是否可以从javascript更改html中tag的css。我知道一种使用

document.getElementsbyTagName

获取带有该标签的所有元素并使用 for 循环来更改每个元素的 css 属性的方法...但是我正在寻找一种可能像这样更紧凑的方法

document.getElementsbyTagName("p").style.color = "red"

编辑：使用 .forEach 几乎与使用 for 循环相同......我不想使用这种方法，因为处理所有元素需要时间，特别是当页面缩放到具有大量 p 标签时。

Answer 1

这是一个衬垫，少于这个是不可能的。

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>

Answer 2

你可以创建一个辅助函数来为你做这件事，也许是这样的：

function doAll(tagName, action) {
    document.querySelectorAll(tagName).forEach(action);
}
doAll("p", element => element.style.color = "red");

Answer 3

实现这一目标的一种方法是替换整个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 属性