Add CSS with JavaScript

This is a memo about how to add CSS with JavaScript. Use document.createElement and document.body.appendChild.

Like this.

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".article-body p {margin: 0 0 10em;}";
document.body.appendChild(css);

If you copy and paste this into the Chrome developer tools console, it will be reflected immediately.

I only knew about .style, but this method allows you to do various things. With .style, you can specify p, but you can’t write like .article-body p to specify multiple elements.

With this method, you can add CSS in the same way as editing a CSS file, which is convenient.