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

我同意jmort253可能直接修改样式属性，或者加载css文件是最好的。然后，您可以使用更高效的addClass和removeClass方法。话虽如此，样式元素应该在头部（当然它们在身体中工作，但我记得不支持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 2

在MSIE中设置与<style/>元素相关的styleSheet-object的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://jsfiddle.net/doktormolle/BLJUv/

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

Answer 3

你正在使用jQuery，jQuery有一个巨大的方法库来动态改变元素的样式：

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

$(selector).propertyName(value);

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

因此，要更改id =“abc”的元素的颜色，以下方法将起作用：

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

此外，如果您正在寻找主题元素或元素组，您可以创建一个style.css文件，概述不同classNames的样式。然后，您可以通过向元素添加或删除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问题，而且还适用于所有其他主流浏览器。

Answer 4

这是否有效：

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

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

或者

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

如何在IE8中注入样式？

4 个答案: