动态更改JavaScript或jQuery中的CSS规则

Question

我正在寻找一种方法来更改文档中导入的样式表的CSS规则.所以我有一个外部样式表class,div里面有一些属性.我想用JavaScript或jQuery改变其中一条规则.

这是一个例子:

.red{
    color:red;
}

所以我的想法是用JavaScript做一些事情,HTML知道现在color是另一种颜色:

.red{
    color:purple;
}

但是我希望通过追加方式为将来添加的每个元素都有这个规则.因此,如果我添加一个spanCSS类.red,文本必须是紫色而不是红色.

我希望我说清楚.

Answer 1

您可以将样式声明注入DOM.

$("head").append('<style>.red { color: purple }</style>');

有趣 - 为什么你认为这是一个坏主意 - 因为它很难逆转？ (5认同)
这样做通常是一个坏主意IMO,但我会赞成,因为它完全符合OP的要求,为所有元素添加样式,包括以后添加到DOM的未来元素. (3认同)
@Grim ......它也很难追踪:根据JS的复杂性,很难调试为什么某些东西没有像你期望的那样出现.在某些情况下,这是有用的 - 我来到这个问题是因为我需要知道如何为Greasemonkey脚本执行此操作... (2认同)

Answer 2

你用jQuery .css()方法做到这一点.

$('.red').css('color', 'purple');

对于多个规则:

$('.red').css({
    'color': 'purple',
    'font-size': '20px'
});

当您通过追加方式将动态元素添加到DOM中时,只需将这些元素添加一些class或者在追加它们之后id编写CSS如上所述的规则,它们将应用于所有动态创建的元素.

工作样本

在我看来,添加动态规则并不是一个好的解决方案.而不是你可以加载一些外部CSS文件.

但是,如果您需要类似动态规则的添加方法:

$('head').append(
  $('<style/>', {
    id: 'mystyle',
    html: '.red {color: purple }'
  })
);

并供将来使用:

$('#mystyle').append(' .someother { color: green; font-size: 13px } ');

Answer 3

如果要添加规则,而不是直接使用样式元素的样式,则可以使用CSSStyleSheet.insertRule().它需要两个参数:规则作为字符串,以及插入规则的位置.

以上链接示例:

// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);

在这种情况下,myStyle是元素的.sheet成员style.

据我所知,style必须先将元素插入到文档中,然后才能抓住其工作表,并且它不能是外部工作表.您也可以从中抓取一张纸document.styleSheets,例如

var myStyle = document.styleSheets[1]; // Must not be a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);

注意:该页面建议您应考虑更改元素的类,而不是更改这些类的显示方式.