* {font-family：'Lato'}与js

Question

I want to set the global font with JS.

currently css:

* {
    font-family: 'Lato'
}

It only works when I use *. using body instead does not work

I could change if for body like this:

document.body.style.fontFamily = "Lato"

But I want a js version for the * selector.

Answer 1

You'll need to append a style element to do this reasonably. (To do it un reasonably, spin through every element on the page and set it via .style . See below.)

It's easy enough to do:

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

Of course, all the normal CSS rules apply. An element with a more-specific rule setting font-family , or a .style property setting it, will still use that more-specific setting.

This has the advantage that it applies to new elements added after you've done it as well as existing elements.

---

If you wanted to visit every element on the page to set .style.fontFamily explicitly on each, the quick-and-dirty version on modern browsers is:

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

getElementsByTagName("*") will access the browser's list of all elements in the document, if it already has one; and build it if not. (This is in contrast to querySelectorAll , which is required to always build a new one.) Then we loop over it by borrowing forEach from Array.prototype . (See the "array-like objects" part of my answer here for details.)