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

より良い解決策は、本文タグの高レベルのクラスまたは 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');
  }
});
于 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 に答える