Question

它在Firefox和Chrome中运行良好，但在IE8中不起作用。这是html结构：

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
   $(function() {
    // this does not work in IE
    $('<style type="text/css"></style>').text('body {margin: 0;}').appendTo('head');
   });
  </script>
 </head>
 <body>
 </body>
</html>

在IE中这样做的替代方法是什么？

Answer 1

这在IE7中对我有用：

$('<style type="text/css">body {margin: 0;}</style>').appendTo($('head'));

另一种可能更容易阅读的语法：

$('head').append('<style type="text/css">body {margin:0;}</style>');

但是，调用.text(val)或.html(val)来设置style标记的内容将导致抛出异常，因为它们设置了innerHTML DOM属性，只读的。

以下是innerHTML属性的IE's documentation：

该属性对所有人都是可读/写的对象除了以下对象它是只读的：COL，COLGROUP， FRAMESET，HEAD，HTML，STYLE，TABLE， TBODY，TFOOT，THEAD，TITLE，TR。

Answer 2

我个人会这样做。

var styles = {
  margin: '0',
  padding: '5px',
  border: 'solid 0px black'
}

$('body').css(styles);

Answer 3

我遇到了与jQuery的依赖插件相同的问题，只需使用以下代码：

$('head').append('<style>' + content + '</style>');

然后您的代码几乎适用于所有浏览器，此处“内容”是您在外部定义的变量，它将包含您要插入<style>标记的数据。它肯定会奏效。

Answer 4

使用JQuery动态加载CSS文件。

var link = $("<link>");
link.attr({
    type: 'text/css',
    rel: 'stylesheet',
    href: <your CSS file url>
});
$("head").append( link );

Answer 5

尝试：$('<div/>').load("style.css",function(style){ $(data.appendTo).append('<style type="text/css">' + style + '</style>'); });

Answer 6

尝试jQuery中的css函数：

$( 'body' ).css( { margin: 0 } )

使用text方法向样式元素添加css规则在IE中不起作用

6 个答案: