jQuery 将带有文本方法的 css 规则添加到样式元素在 IE 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2692770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding css rules with text method to style element does not work in IE
提问by powerboy
It works fine in Firefox and Chrome, but does not work in IE8. Here is the html structure:
它在 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>
And what' s the alternative to do this in IE?
在 IE 中执行此操作的替代方法是什么？
回答by Ken Browning
This is working for me in IE7:
这在 IE7 中对我有用：
$('<style type="text/css">body {margin: 0;}</style>').appendTo($('head'));
Another syntax which might be easier to read:
另一种可能更容易阅读的语法：
$('head').append('<style type="text/css">body {margin:0;}</style>');
However, calling either .text(val)or .html(val)to set the contents of the styletag will cause an exception to be thrown because they set the innerHTMLDOM property which is read-only.
但是，调用.text(val)或.html(val)来设置style标记的内容将导致抛出异常，因为它们设置了innerHTML只读的DOM 属性。
Here is IE's documentationof the innerHTMLproperty:
这是IE浏览器的文档中的innerHTML属性：
The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.
除以下对象外，该属性对于所有对象都是可读/可写的：COL、COLGROUP、FRAMESET、HEAD、HTML、STYLE、TABLE、TBODY、TFOOT、THEAD、TITLE、TR。
回答by James Westgate
Personally I would do this.
我个人会这样做。
var styles = {
margin: '0',
padding: '5px',
border: 'solid 0px black'
}
$('body').css(styles);
回答by Pawan Choudhary
I was having the same problem with a dependency plug-in for jQuery, just use this code:
我在使用 jQuery 依赖插件时遇到了同样的问题，只需使用以下代码：
$('head').append('<style>' + content + '</style>');
then your code will work in almost all browsers, here "content" is a variable you define externally and it will contain the data you want to insert into <style>tags. it will certainly work.
那么您的代码几乎可以在所有浏览器中使用，这里的“内容”是您在外部定义的变量，它将包含您要插入到<style>标签中的数据。它肯定会起作用。
回答by Jeremy B.
To dynamically load a CSS file using JQuery.
使用 JQuery 动态加载 CSS 文件。
var link = $("<link>");
link.attr({
type: 'text/css',
rel: 'stylesheet',
href: <your CSS file url>
});
$("head").append( link );
回答by Leon Gurbanov
try: $('<div/>').load("style.css",function(style){
$(data.appendTo).append('<style type="text/css">' + style + '</style>');
});
尝试： $('<div/>').load("style.css",function(style){
$(data.appendTo).append('<style type="text/css">' + style + '</style>');
});
回答by hookedonwinter
Try the cssfunction in jQuery:
试试cssjQuery 中的函数：
$( 'body' ).css( { margin: 0 } )
