替换是实时完成的——用户点击某些东西,样式改变:
$('link#mystyle').attr('disabled', 'disabled');
$('link#mystyle').remove();
if(new_style){
$('head').append('<link rel="stylesheet" id="mystyle" href="'
+ new_style +'.css" type="text/css" />');
}
问题是默认情况下样式表链接后有一个内联样式 block :
<style>
...
</style>
我上面的代码将删除原始样式表,并将新样式表附加到样式 block 之后,因此新样式表将覆盖样式 block 中的一些规则。
我不想这样,那么我能否以某种方式将我的新样式附加到同一个位置,以便新样式表中的规则以与初始样式表规则相同的优先级应用?
最佳答案
更好的解决方案是根据 body 标签上的高级类或 id 来格式化您的 css:
/*Style 1*/
body.style1 h1{...}
body.style1 ...
/*Style 2*/
body.style2 h1{...}
body.style2 ...
然后,您所要做的就是更改 body 标签上的类:
$('#something-to-click').click(function(){
($('body').hasClass('style1')){
$('body').addClass('style2').removeClass('style1');
}else{
$('body').addClass('style1').removeClass('style2');
}
});
关于jquery - 用 jQuery 替换样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10439352/