让我们考虑一下html页面中有一个样式表,如下所示
#main {
display: block;
width: 500px;
}
#content {
border: 1px solid #ccc;
}
现在我有一种情况需要更新#main
的CSS规则,这意味着我必须添加一些css属性,如颜色,背景等。
因此我的html页面中的样式表应该如下所示进行更新:
#main {
display: block;
width: 500px;
color: #333;
background: #fff;
}
#content {
border: 1px solid #ccc;
}
我可以使用jQuery css添加CSS规则,如下所示
$('#main').css('background','blue');
//but this is not adding #main in <style></style>
//output of above jquery code is:
//<div id='main' style="background: blue"></div>
我需要的是将css属性添加到样式表中的规则(即<style></style>
中的#main)
我正在开发代码编辑器,这就是我遇到这样一个问题的原因。
答案 0 :(得分:2)
我花了很长时间,但最后我们走了: this thread
如果我们点击#main
元素,style
标记将使用我们刚刚定义的函数进行更改,那么如果我们在函数之前获得script
标记的文本将是:
<style>#main {
display: block;
width: 500px;
height:200px;
background-color:#000;
}
#content {
border: 1px solid #ccc;
}
</style>
然后在调用函数之后它将是:
<style>#main {
display: block;
width: 500px;
height:200px;
background-color:#000;
color:#FFF;
}
#content {
border: 1px solid #ccc;
}
</style>
功能:
//*styleElem* is the target style tag
//*elemToChange* is the target element that we want to change inside the style tag
//*cssRule* is the new CSS rule that we want to add to the target element
function addCSSToStyleTag(styleElem,elemToChange,cssRule){
var oldStyle=styleElem.text(),
theElement=elemToChange,
position=oldStyle.indexOf(theElement),
cssToBeAdded=cssRule,
closingBracketIndex=oldStyle.indexOf('}',position)-1,
newStyle=oldStyle.substr(0,closingBracketIndex)+cssToBeAdded+oldStyle.substr(closingBracketIndex,oldStyle.length);
styleElem.text(newStyle);
};
$('#main').one('click',function(){
addCSSToStyleTag($('style'),'#main','color:#FFF;');
});
答案 1 :(得分:1)
我认为你无法在当前样式中明确地捕获css规则,但是作为一种解决方法,你可以使用新规则将另一种样式添加到头部,它将覆盖现有规则,如下所示:
var newCss = "<style>#main{
display:block;
width:500px;
color: #333;
background:#fff;
}
#content{
border:1px solid #ccc;
} </style>";
$("head").append(newCss);
答案 2 :(得分:0)
试试这个
var style="#main{display: block;
width: 500px;
color: #333;
background: #fff;"};
$('style').append(style);
假设您在页面
中只有一个<style>
标记
答案 3 :(得分:0)
您可以将硬核css应用于特定div ...就像这样
$('#main').css("background":"blue");