Question

使用js和/或jQuery创建动态样式标记的最佳方法是什么？

我试过了：

var style= jQuery('<style>').text('.test{}');

这适用于FF但在IE7中弹出错误“对方法或属性访问的意外调用。”

var style = document.createElement('style');
style.innerHTML='.test{}';

给出同样的错误。如果我使用innerHTML或innerText，则无关紧要。奇怪的是它在附加样式标记之前显示错误。

我怀疑cssText与它有关，但我不确定如何。

Answer 1

将文本添加到将正确呈现的样式表中需要在IE中使用与其他浏览器不同的语法。您可以使用jquery

来使用其中一些

   document.addStyle= function(str, hoo, med){
     var el= document.createElement('style');
     el.type= "text/css";
     el.media= med || 'screen';
     if(hoo) el.title= hoo;
     if(el.styleSheet) el.styleSheet.cssText= str;//IE only
     else el.appendChild(document.createTextNode(str));
     return document.getElementsByTagName('head')[0].appendChild(el);
    }

Answer 2

这种动态生成css规则的方法即使有效也会有缺陷。插入超过30个元素后，IE将忽略<style>元素（参见http://support.microsoft.com/kb/262161）。

您可以使用jquery.rule插件来通过javascript操作css规则。

Answer 3

我会查看Javascript的document.styleSheets和addRule()方法。

（免责声明：我自己从未实际使用过这个）

创建动态内联样式表

3 个答案: