用jQuery替换样式表

时间:2012-05-03 21:08:11

标签: jquery html css stylesheet

替换是实时完成的 - 用户点击某些内容,样式更改:

$('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" />');

}

问题是默认情况下样式表链接后有一个内联样式块:

<style>
  ...
</style>

上面的代码将删除原始样式表,并在样式块之后附加新样式表,因此新样式表将覆盖样式块中的某些规则。

我不想那样,所以我能以某种方式将我的新样式添加到同一个地方,所以新样式表中的规则应用的优先级与初始样式表规则相同吗?

2 个答案:

答案 0 :(得分:6)

更好的解决方案是根据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');
  }
});

答案 1 :(得分:2)

@Kroehre是对的,但如果你坚持按照http://api.jquery.com/replaceWith/方法坚持这样做。

$('link#mystyle').replaceWith('<link rel="stylesheet" id="mystyle" href="' 
                + new_style +'.css" type="text/css" />');

应该做你想做的事。