jquery - 如何使用 jQuery 更改定义 H2 的 CSS？

Question

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

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

将遍历所有 h2 标签并将其更改为

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

但这并没有改 rebase 本的内容

 <h2>something</h2> 

看起来像。例如，如果我告诉 RTE 在某些内容周围放置 h2 标签，我将不会获得 jQuery 定义的红色样式(很可能)。

有没有一种方法可以让 jQuery 更改定义基本 h2 的 CSS，以便 RTE 设置的 h2 反射(reflect)新样式？

谢谢

Answer 1

使用 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");

注意:您不必使用该数组，我添加它只是为了更轻松地添加多个样式。

参见test case on jsFiddle .

使用原生 CSSStyleSheet.insertRule

您还可以使用 native .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));
}

参见test case on jsFiddle .