如何在IE8中注入样式？

Question

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

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

你可以发现，这在IE8上不起作用！

我该如何让它在IE8上运行？

会出现错误：'unexpected call to method or property access'，因为IE8无法识别html标记为有效（abc部分）。

- TIMEX

Answer 1

我同意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);

- mrtsherman

---

@Dr.Molle- 实际上不是这样的。我也不知道为什么。如果你只是打出代码，它就可以工作（我改变了我的答案）。我尝试按照你的答案建议设置cssText，但它没有奏效。 - mrtsherman

Answer 2

在 MSIE 中，设置与 <style/> 元素相关的 styleSheet 对象的 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/zh-cn/library/ie/ms533698(v=vs.85).aspx

- Dr.Molle

---

分数。我不知道为什么人们没有完全投票支持它。这完全符合我的需求。谢谢！ - TIMEX

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方法和属性类别的详细信息更加丰富。这不仅可以解决您在IE8上的问题，而且也适用于所有其他主要浏览器。

- jamesmortensen

---

我不能这样做。因为用户定义规则，而我只是应用它们。这些规则并不是铁板一块的。 - TIMEX

用户定义样式是什么意思？即使用户定义了样式，您仍然应该能够使用上述技术之一来应用它们。现在，我还没有尝试过这个，但您可以尝试动态生成这些用户提供的样式作为动态CSS文件，并将它们附加到HEAD部分var i = $（'link'）.attr（“href”，“/userGenerated.php?userId=555”）; $（'head'）.appendChild（i）; 在这种情况下，userGenerated.php从文件或数据库中提取样式。 - jamesmortensen

Answer 4

这个可以工作吗：

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

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

或者

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

- qwertymk