如何将样式注入 IE8？

Question

// create a style element
$("#main").html('<style id="custom_persona_css"></style>'); 

$("#custom_persona_css").append('#abc{ color:#000000; }');

如您所知，这在 IE8 中不起作用！

我怎样才能使它在 IE8 中运行？

将会出现错误：“意外调用方法或属性访问”，因为 IE8 无法将 html 识别为有效（abc 部分）

Answer 1

在 MSIE 中设置与

   $('<style id="custom_persona_css"></style>').appendTo('head'); 

   if($.browser.msie)
   {
    $("#custom_persona_css").prop('styleSheet').cssText='#abc{ color:#000000; }';
   }
   else
   {
    $("#custom_persona_css").append('#abc{ color:#000000; }');
   }

http://jsfiddle.net/doktormolle/BLJUv/

更多信息：http://msdn.microsoft.com/en -us/library/ie/ms533698%28v=vs.85%29.aspx

Answer 2

我同意 jmort253 的观点，也许直接修改样式属性，或者加载 css 文件是最好的。然后，您可以使用更高效的 addClass 和 removeClass 方法。话虽这么说，样式元素应该位于头部（当然它们在正文中工作，但我记得没有官方支持）。所以你可以为此目的做类似的事情。

http://jsfiddle.net/TCUxx/1

$('head').append('<style type="text/css">#abc{ color:#ff0000; }</style>');

已更新 - 由于某种原因这不起作用。我不知道为什么。适用于 IE9。

var $styleElement = $('<style />', {
    type: 'text/css',
    text: '#abc{ color:#ff0000; }'
});

$('head').append($styleElement);

Answer 3

您正在使用 jQuery，并且 jQuery 有一个巨大的方法库，用于动态更改元素的样式：

$(selector).css(propertyName, value);

$(selector).propertyName(value);

上面只是使用 jQuery 影响选择器所标识的一个元素或一组元素的样式的两个示例。

因此，要更改 id="abc" 元素的颜色，可以使用以下方法：

$('#abc').css('color','#000000');

此外，如果您要为一个元素或一组元素设置主题，您可以创建一个 style.css 文件，概述不同 className 的样式。然后，您可以通过向元素添加或删除 className 来简单地应用样式，如下所示：

style.css:

.custom_persona {
    color:#000000;
}

.some_other_custom_style {
    color:red;
    background-color: #fff;
}

index.html script:

$('#abc').addClass('custom_persona');

// OR

$('#abc').addClass('.some_other_custom_style');
$('#abc').removeClass('custom_persona');

jQuery CSS 方法和属性类别 更详细地介绍了哪些属性可用。这不仅可以解决您的 IE8 问题，而且也适用于所有其他主要浏览器。

Answer 4

这有效吗：

var $style = $("#custom_persona_css");

$style.html(
    $style.html() + '#abc{ color:#000000; }'
);

或者

$("#custom_persona_css")[0].innerHTML += '#abc{ color:#000000; }'