Pet*_*ter 32 css jquery stylesheet
我想改变background-color的body我的HTML文档.我的问题是jQuery将样式添加到body标记,但我想更改style标记中的值.这可能使用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>
Jör*_*rer 119
虽然不更改现有的样式元素,但这可以作为创建新元素的跨浏览器方式:
$( "<style>body { background: black; }</style>" ).appendTo( "head" )
通过级联,它将覆盖现有的样式,这应该可以解决问题.
Dr.*_*lle 30
这是操作样式表的具体方法,
DOM:insertRule()
Microsoft: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')
第二个论点应该是明确的,规则.作为可选的第3个参数,可以提供context-document.
第一个参数是选择器作为数组元素.
请注意,您不必使用逗号分隔的不同选择器,因为MSIE仅接受"单个上下文选择器"作为addRule()的参数
看看小提琴:http://jsfiddle.net/doktormolle/ubDDd/
jQuery总是在标签本身添加它的CSS.
我认为你应该使用append()具有新体型规则的函数.
像这样:
var newRule = "body{ /*your CSS rule here...*/ }";
$("style").append(newRule);
要么
$("body").css({ /*CSS rule...*/ });
我希望这就是你的意思......
也许将所有现有规则复制到字符串、添加内容或修改其中的内容、删除现有标签并替换修改后的内容更容易，如下所示：
//Initialize variable
var cssRules = '';
//Copy existing rules
for (var i = 0; i < document.styleSheets[0].cssRules.length; i++) {
cssRules += document.styleSheets[0].cssRules[i].cssText;
}
//Delete existing node
$('style').remove();
// .... Add stuff to cssRules
//Append new nodes
$('<style>' + cssRules + '</style>').appendTo('head');