Jquery 将带有文本方法的css规则添加到样式元素在IE中不起作用_Jquery_Internet Explorer

Jquery 将带有文本方法的css规则添加到样式元素在IE中不起作用

jquery internet-explorer

Jquery 将带有文本方法的css规则添加到样式元素在IE中不起作用,jquery,internet-explorer,Jquery,Internet Explorer,它在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/j

它在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中不起作用
$（''）.text（'body{margin:0；}'）。appendTo（'head'）；
});

在IE中有什么替代方法呢？

试试jQuery中的

css

函数：

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

使用JQuery动态加载CSS文件

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

var-link=$（“”）；
link.attr({
键入：“text/css”，
rel:'样式表'，
href:
});
$（“标题”）。附加（链接）；

这在IE7中对我有用：

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

$（'body{margin:0；}'）。appendTo（$（'head'）；

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

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

$（'head'）.append（'body{margin:0；}'）；

但是，调用

.text（val）

或

.html（val）

来设置

样式

标记的内容将导致引发异常，因为它们设置了只读的

innerHTML

DOM属性

以下是

innerHTML

属性的示例：

该属性对所有对象都是读/写的对象，但以下对象除外，例如它是只读的：COL，COLGROUP，框架集、标题、HTML、样式、表格、， TBODY，TFOOT，THEAD，TITLE，TR

我个人会这么做

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

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

我对jQuery的依赖插件也有同样的问题，只需使用以下代码：

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

$（'head'）。追加（''+内容+''）；

然后，您的代码将在几乎所有浏览器中工作，这里的“内容”是您在外部定义的变量，它将包含您要插入到

标记中的数据。它肯定会工作。

试试：

$（''）.load（“style.css”，函数（style）{
$（data.appendTo）.append（“”+style+“”）；
});
如果我需要附加很多CSS规则怎么办？例如，我想将一个完整的CSS文件注入HTML？为什么不直接插入它呢？因为我想根据需要插入一些CSS规则。在某些情况下，如果用户未触发事件，则网页不需要这些规则。附加一个额外的CSS文件需要另一个HTTP请求。@powerboy如果您有很多东西要添加，我可以看出这是一个问题。你可以按照我的方式来做，但要找到并替换它需要很多时间！你有多少规则？我知道了，请参考我的答案，看看如何按需插入CSS文件。我不确定你是否理解jquery选择器，但为什么它在firefox和chrome中工作？@Jeremy，OP在这里向jquery传递一个空元素以创建一个新元素，而不是使用选择器。这没什么错。只是作为我上一点的参考-jQuery函数可以用很多种方式使用-Powerboy使用它的方式在这里有文档记录：$（'hello world'）。appendTo（$（'body'）
将创建一个新的div并将其附加到正文中。它不是选择器。您的解决方案是动态插入CSS文件。但我要寻找的是一种简单的方法，可以动态插入多个（但不仅仅是一个）CSS规则（不是CSS文件），因为附加另一个CSS文件会初始化另一个HTTP请求。我的程序需要运行得很快，有时服务器可能会很忙。我需要尽一切努力缩短响应时间。我不确定您认为http请求需要多长时间，但就目前而言，我不相信加载所有CSS规则，然后不使用它们会比获取所需的CSS文件更快，除非您只查看一些CSS规则。我们讨论了多少CSS？这些CSS规则可以提前在JS中编写，因此它们与JS文件在相同的HTTP请求中传输。我只想让那些CSS规则按需应用于网页。我在IE8中遇到了与文本和html相同的问题。@Ken Browning-是的，我已经尝试过与您的解决方案相同的方法。它在IE8和兼容性视图中确实有效。但我认为，var规则='100个字母在这里'$（''）。文本（规则）。附录（“标题”）看起来比var规则='100个字母'更漂亮$（''+规则+''）。附于（'head'）您可以选择“漂亮”或“工作”。由你决定。IE似乎认为innerHTML
对于style
元素应该是只读的。我在标准模式下使用JQuery 1.4.1和IE8以及$（“'IE似乎认为innerHTML对于style元素应该是只读的”.也许这就是重点！啊…这个解决方案看起来很不错！但是如果我们需要对不同的DOM元素应用多个规则，它会变得冗长。