2

質問の言い換え：ドキュメントに代替スタイルシートを提供するための最良の方法は何ですか？

私はスタイルシートのリストを持っています。それらはすべてhtmlファイルで参照されています。javascriptを使用して、1つのファイルを除くすべてを無効にします。

例：

style1   disabled = false
style2   disabled = true

実際には、ロードする最後のスタイルシート（style2）は、無効になっているプロパティに関係なく、アクティブなスタイルシートです。

Chromeのドキュメントのスタイルシートを切り替えるにはどうすればよいですか？

属性の値を設定しようとしましたhrefが、読み取り専用のようです。

私が使用しているコードの例:(さまざまなcss情報を格納しているMenuStylesというオブジェクトを使用しています）

function setActiveStyleSheet(name) {

    var selectedSheet;
    var currentSheet;
    for (var i = 0; i < MenuStyles.styleSheets.length; i++) {
        currentSheet = MenuStyles.styleSheets[i];
        if (currentSheet.name === name) {
            selectedSheet = currentSheet.sheetObj;
            currentSheet.disabled = false;
        } else {
            currentSheet.disabled = true;
        }
    }
    return selectedSheet;
}

編集： 問題は完全にコードのバグが原因であることが判明しました。無効なプロパティは正常に機能します。以下は固定機能です。

function setActiveStyleSheet(name) {
    var selectedSheet;
    var currentSheet;
    for (var i = 0; i < MenuStyles.styleSheets.length; i++) {
        currentSheet = MenuStyles.styleSheets[i];
        if (currentSheet.name === name) {
            selectedSheet = currentSheet.sheetObj;
            currentSheet.sheetObj.disabled = false;
        } else {
            currentSheet.sheetObj.disabled = true;
        }
    }
    return selectedSheet;
}
4

6 に答える 6

2

一般に、BODYタグをサブクラス化し、これらのクラスを使用する単一のスタイルシートを使用します。次に、スタイルシートではなく、BODYクラスを交換します。それ以外の場合は、このサーバー側で実行する必要があります。

<body class="sheet1">

それから

sheet1.h1 {
 ...
}
sheet2.h1 {
 ...
}
于 2012-10-10T17:48:35.433 に答える
2

あなたがあなたのスタイルシートの順序を知っているなら、あなたは使うことができます-

document.styleSheets[i].disabled=true or
document.styleSheets[i].disabled=false;

2つのスタイルシートがある場合は、それらを切り替えることができます-

var S=document.styleSheets;
if(S[0].disabled){
  S[0].disabled=false;
  S[1].disabled=true;
}
else{
  S[1].disabled=false;
  S[0].disabled=true;
}
于 2012-10-10T20:38:00.413 に答える
2

現在のブラウザは、「disabled」DOMプロパティ（Gecko）を使用するか、disabled属性（WebkitおよびIE）を追加/削除することにより、スタイルシートを動的に有効/無効にする合理的な機能を提供します。残念ながら、これらのアプローチは、IE10 +を使用していない限り、外部スタイルシートを参照する「link」タグ（「style」タグではない）でのみ確実に機能します。はい-私は言った-IEだけがここで正しいことをします。

非IEブラウザで「style」タグを使用するインラインCSSの場合、上記で説明したような有効化/無効化のより大まかな方法​​を見つける必要があります（style要素を削除するなど）。

于 2013-06-13T18:35:18.760 に答える
0

これをdisabledプロパティの設定と、スタイルシートの「title」属性を含めることで機能させることができました。titleプロパティは、スタイルシートをPERSISTENTではなくPREFERREDにします。http://www.alistapart.com/articles/alternate/を参照してください

于 2012-10-11T10:01:46.300 に答える
0

私はこれを達成するための素晴らしい方法（IMHO）を見つけました：

スタイルシートの正確な順序を知っているとしましょう。スタイルシート0と1（1番目と2番目）を交互に使用したいとします。

スタイルシートの状態（有効/無効）を取得するには、次のことを試してください（つまり、2番目の状態をテストします）。

document.styleSheets[1].disabled

...そしてそれはtrueまたはを返しますfalse。

onclickしたがって、別の方法として、イベントで次のコードを記述できます。

document.styleSheets[0].disabled = !( document.styleSheets[1].disabled = !(document.styleSheets[1].disabled) );

HTH！

于 2014-05-08T00:33:54.117 に答える
0

リンクが無効になっている場合、document.styleSheetsはコレクション内のリンクを返しません（Chromeの場合）。有効なリンクのみが返されます。

document.head.getElementsByTagName（'LINK'）を使用して、それらすべてをHEADから取得します。

好き：

 private changeStyle(styleName: string): void {
       const links = document.head.getElementsByTagName('LINK');
       for (let i = 0; i < links.length; i++) {
            const link = links[i] as any;

            if( !link.href) continue;

            if (link.href.indexOf(styleName) === -1) {
                link.disabled = true;
            } else {
                link.disabled = false;
            }
        }
    }
于 2019-02-21T22:12:00.510 に答える