1

替换是实时完成的——用户点击某些东西，样式会改变：

$('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>

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

我不希望这样，所以我可以以某种方式将我的新样式附加到同一个地方，因此新样式表中的规则与初始样式表规则具有相同的优先级吗？

4

2 回答 2

6

更好的解决方案是将您的 css 格式化为根据 body 标签上的高级类或 id 变化：

/*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');
  }
});
于 2012-05-03T21:15:27.270 回答
2

@Kroehre 是对的，但是如果您坚持按照自己的方式进行操作，则可以使用http://api.jquery.com/replaceWith/方法。

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

应该做你想做的。

于 2012-05-03T21:20:29.690 回答