Jak přidáte CSS pomocí Javascriptu?

Jak přidáte pravidla CSS (např. strong { color: red } ) pomocí Javascriptu?

Odpověď

Můžete to provést také pomocí rozhraní CSS DOM Level 2 (MDN):

var sheet = window.document.styleSheets[0];
sheet.insertRule('strong { color: red; }', sheet.cssRules.length);

…na všech kromě (přirozeně) IE8 a dřívějších, které používají své vlastní okrajově odlišné znění:

sheet.addRule('strong', 'color: red;', -1);

Ve srovnání s metodou createElement-set-innerHTML to má teoretickou výhodu v tom, že se nemusíte starat o vkládání speciálních znaků HTML do innerHTML, ale v praxi jsou prvky stylu CDATA ve starším HTML a '<' a '&' se v šablonách stylů stejně používají zřídka.

Než budete moci začít takto přidávat šablonu stylů, musíte mít vytvořenou šablonu stylů. Může to být jakákoli existující aktivní šablona stylů:externí, vložená nebo prázdná, na tom nezáleží. Pokud žádný neexistuje, jediným standardním způsobem, jak jej v současnosti vytvořit, je createElement.