带有 css 选择器的 addRule / insertRule答案

【问题标题】：addRule / insertRule with css selectors带有 css 选择器的 addRule / insertRule
【发布时间】：2012-03-26 06:12:26
【问题描述】：

是否可以使用 addRule 或 insertRule 来传递 id 选择器？即：

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

哪个会为 div 创建规则？

或者有什么已知的解决方法吗？

【问题讨论】：

你试过了吗？根据我正在查看的文档，这应该可以正常工作 - 假设 JavaScript 允许您使用无效的 id 这样做。 #3 无效，因为 id 必须以字母开头。
我做了一些适合你的东西：gist.github.com/yckart/5563717

标签： javascript css dom css-selectors

【解决方案1】：

您的代码不起作用，因为选择器无效。 ID 选择器 #3 无效，因为 ID 选择器 cannot begin with a digit。

要解决这个问题，请使用一个可以通过有效选择器选择的ID，例如#three:

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

【讨论】：

【解决方案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; }" );

【讨论】：