如何将样式注入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/>-element相关的样式表对象的cssText-属性：

   $('<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://msdn.microsoft.com/en-us/library/ie/ms533698%28v=vs.85%29.aspx

Answer 2

我同意jmort253的观点，也许直接修改样式属性，或者加载css文件是最好的。然后，您可以使用更有效的addClass和removeClass方法。也就是说，样式元素应该在头部(当然它们在body中工作，但我记得不支持officially )。所以你可以为这个目的做一些类似的事情。

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');

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

style.css:

.custom_persona {
    color:#000000;
}

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

index.html脚本：

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

// OR

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

jQuery CSS category of methods and properties更详细地介绍了可用的属性。这不仅可以解决您的IE8问题，而且还可以在所有其他主要浏览器中运行。