addRule / insertRule с селекторами CSS

Question

Можно ли использовать addRule или insertRule для передачи селекторов идентификаторов?то есть:

document.styleSheets[1].addRule('div #3', 'font: 14px verdana');

, которая создала бы правило для div?

Или есть какой-нибудь известный обходной путь?

Answer 1

Ваш код не работает, потому что селектор недействителен. Селектор идентификатора #3 недопустим, поскольку селектор идентификатора не может начинаться с цифры .

Чтобы исправить это, используйте идентификатор, который можно выбрать с помощью селектора valid , например #three:

document.styleSheets[1].addRule('div #three', 'font: 14px verdana');

Answer 2

В качестве альтернативы, вы можете попробовать этот метод: http://pp19dd.com/2012/01/add-inline-css-or-remote-css-file-with-javascript/

function css_add_file( css_url ) {
    var c = document.createElement('link');
    c.type = 'text/css';
    c.rel = 'stylesheet';
    c.href = css_url;
    c.media = 'screen';
    c.title = 'dynamicLoadedSheet';
    document.getElementsByTagName("head")[0].appendChild(c);
}

Это позволит вам более или менее внедрять правила CSS без необходимости микроуправления их структурой.

Пример:css_add_inline( "div#three { font-size:14px; font-family: Verdana; }" );