javascript - * { 字体系列 : 'Lato' } with js

Question

我想用JS设置全局字体。

目前的CSS:

* {
    font-family: 'Lato'
}

只有在我使用 *.使用 body 是行不通的

如果 body 像这样，我可以改变:

document.body.style.fontFamily = "Lato"

但我想要 * 选择器的 js 版本。

Answer 1

您需要附加一个 style元素合理地做到这一点。 (要不合理地做到这一点，请旋转页面上的每个元素并通过 .style 进行设置。见下文。)

这很容易做到:

var style = document.createElement("style");
style.type = "text/css";
style.appendChild(
    document.createTextNode("* { font-family: 'Lato' }")
);
document.head.appendChild(style);

当然，所有常规的 CSS 规则都适用。具有更具体规则设置的元素 font-family , 或 .style属性设置它，仍将使用该更具体的设置。

这样做的好处是它适用于您完成后添加的新元素以及现有元素。

---

如果你想访问页面上的每个元素来设置.style.fontFamily明确地在每个，现代浏览器上的快速和肮脏的版本是:

Array.prototype.forEach.call(document.getElementsByTagName("*"), function(el) {
    el.style.fontFamily = "Lato";
});

getElementsByTagName("*")将访问文档中所有元素的浏览器列表，如果它已经有的话；如果没有，则构建它。 (这与 querySelectorAll 相反，它总是需要构建一个新的。)然后我们通过借用 forEach 来循环它。来自 Array.prototype . (有关详细信息，请参阅 my answer here 的“类数组对象”部分。)