1

我想让用户告诉我 h2 应该如何设置文本样式。我知道

 $('h2').css({'color':'red'});

将通过并将所有 h2 标签更改为

<h2 style="color: red;">This is the header</h2>

但这并没有改变什么是基本的

 <h2>something</h2>

好像。例如，如果我告诉 RTE 将 h2 标记放在某物周围，我将不会得到 jQuery 定义的红色样式（很可能）。

jQuery 有没有办法改变定义基本 h2 的 CSS，以便 RTE 设置的 h2 反映新样式？

谢谢

4

2 回答 2

3

使用 jQuery

您必须创建一个style元素并将其附加到head，如下所示：

// array containing our styles
var styles = [
    "h2 { color: red; }",
    "h3 { color: green; }"
];

// create the style element and concat the styles
$("<style>" + styles.join("") + "</style>").appendTo("head");

注意：您不必使用数组，我添加它只是为了更容易添加多个样式。

请参阅jsFiddle 上的测试用例。

使用原生CSSStyleSheet.insertRule

.insertRule您还可以使用本机方法将规则插入到样式表中：

// get the last stylesheet
var sheet = document.styleSheets[document.styleSheets.length-1];

// get a reference to the insertRule function
// the addRule method is used in IE8 and older
var insertRule = sheet[sheet.insertRule ? "insertRule" : "addRule"];

// reuse the styles-array from the jQuery snippet
while (styles.length) {
    insertRule.call(sheet, styles.splice(0,1));
}

请参阅jsFiddle 上的测试用例。

于 2013-07-03T18:51:18.450 回答
0

您可以使用 DOM Level 2 接口

sheet.insertRule("h2 {color: red;}", 0);

对于 IE：

sheet.addRule("h2","color: red;", 0);
于 2013-07-03T18:53:38.187 回答