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.