我想更改HTML文档的正文的背景颜色。我的问题是jQuery将样式添加到body标签中,但是我想更改样式标签中的值。这可能使用jQuery吗?
例如,代码
<style title="css_style" type="text/css"> body { background-color:#dc2e2e; /* <- CHANGE THIS */ color:#000000; font-family:Tahoma,Verdana; font-size:11px; margin:0px; padding:0px; background-image: url(http://abc.de/image.jpg); } </style> ... <body> // .... </body>
jQuery的
$('body').css('background-color','#ff0000');
结果
<body style="background-color:#ff0000;"> // .... </body>
解决方法
这是操纵样式表的具体方法,
DOM:insertRule()
微软:addRule()
我刚刚做了一个jQuery的方法(也许别人已经做了,我不知道)
( function( $ ) { $.style={ insertRule:function(selector,rules,contxt) { var context=contxt||document,stylesheet; if(typeof context.styleSheets=='object') { if(context.styleSheets.length) { stylesheet=context.styleSheets[context.styleSheets.length-1]; } if(context.styleSheets.length) { if(context.createStyleSheet) { stylesheet=context.createStyleSheet(); } else { context.getElementsByTagName('head')[0].appendChild(context.createElement('style')); stylesheet=context.styleSheets[context.styleSheets.length-1]; } } if(stylesheet.addRule) { for(var i=0;i<selector.length;++i) { stylesheet.addRule(selector[i],rules); } } else { stylesheet.insertRule(selector.join(',') + '{' + rules + '}',stylesheet.cssRules.length); } } } }; } )( jQuery );
使用示例
$.style.insertRule(['p','h1'],'color:red;') $.style.insertRule(['p'],'text-decoration:line-through;') $.style.insertRule(['div p'],'text-decoration:none;color:blue')
第二个论点应该是明确的规则。作为可选的第三个参数,可以提供上下文文档。
第一个参数是数组元素的选择器。
请注意,您不必使用不同的选择符,用逗号分隔,因为MSIE只接受“单个上下文选择器”作为addRule()的参数,