document.EnableStyleSheetsForSet()の互換性
詳細
alternate stylesheetを知っている学生も多いかもしれませんが、実際にはauthorスタイルシートは3つに設定できます.
1.persistent style sheet:常に適用されるスタイルシート
2.preferred style sheet:デフォルトで適用されるスタイルシート
3.alternate style sheet:その他オプションのスタイルシート
私たちが普段書いているスタイルシートは、persistent style sheetという最初のクラスです.
2番目のクラスのスタイルシートは、titleプロパティのあるスタイルシートです.たとえば、次のようになります.
title=「人文主義」href=「...」>
3つ目はこうです
alternate stylesheet"
title=「クラシック」href=「...」>
alternate stylesheet"
title=「Geek風」href=「...」>
一部のブラウザ(FFとOpera)は、メニューからalternate stylesheetに切り替えることができます.Safariもあるかもしれませんが、Chromeはデフォルトではありませんが、extensionをインストールできます.
なお、切替はtitle属性に基づいて反発し、同じtitleのスタイルシートをスタイルシートセット(style sheet set)と呼ぶ.例えば「古典」に切り替えた後、perferredの「人文主義」はdisableされた.しかしpersistent style sheetは依然として機能している.
問題は、スクリプトを使用してスタイルシートセットを切り替える方法です.CSSOM仕様はこの目的を達成するために新しいAPIを導入した.
[Supplemental] interface Document {
readonly attribute StyleSheetList styleSheets;
...
void
enableStyleSheetsForSet(DOMString? name);
};
簡単です
document.enableStyleSheetsForSet('Geek風')
Geek風スタイルシートセットに切り替えることができます.
FF 4はこの方法をサポートしていますが、早いバージョンやWebKitエンジンを使ったSafari、Chromeなどはどうしますか?
一つの考えはdocumentを遍歴することです.styleSheetsは、標準によって規定された動作がそうであるため、titleに基づいてdisabled値を設定する.コードは次のとおりです.
残念なことに、上記の合理的に見えるコードはWebKitの下でworkできません.WebKitのdocumentのためです.styleSheets集合にはすべてのalternate style sheetは含まれていません.
では、私たちは自分でスタイルの集合を取ることができますか?例えばdocument.querySelectorAll("style, link[rel~='stylesheet']") .実際にはだめです.WebKitはalternateスタイルシートを無視しているので、スタイルシートのdisabled=falseを直接設定しても、スタイルシートを有効にすることはできません(実際にはdisabled値はfalseです).
WebKitがこの点で基準に合わないと文句を言う以外に、私たちは仕方がないのではないでしょうか.
あきらめる前に、specをひっくり返してよく読むべきです.
直接コード:
非常に簡単な実現であり、すべてはdefault-styleという忘れられた特性に由来している.以上のコードはChrome 10でテストに合格しました.
PS.上記のコードでは、HTML 5に追加された属性である「document.head」に気づいたかもしれませんが、より早いブラウザにはこの属性はありません.似たような問題にはquerySelectorメソッドもあります.これらはブラウザ互換性の練習問題として読者に残されている.
alternate stylesheetを知っている学生も多いかもしれませんが、実際にはauthorスタイルシートは3つに設定できます.
1.persistent style sheet:常に適用されるスタイルシート
2.preferred style sheet:デフォルトで適用されるスタイルシート
3.alternate style sheet:その他オプションのスタイルシート
私たちが普段書いているスタイルシートは、persistent style sheetという最初のクラスです.
2番目のクラスのスタイルシートは、titleプロパティのあるスタイルシートです.たとえば、次のようになります.
title=「人文主義」href=「...」>
3つ目はこうです
alternate stylesheet"
title=「クラシック」href=「...」>
alternate stylesheet"
title=「Geek風」href=「...」>
一部のブラウザ(FFとOpera)は、メニューからalternate stylesheetに切り替えることができます.Safariもあるかもしれませんが、Chromeはデフォルトではありませんが、extensionをインストールできます.
なお、切替はtitle属性に基づいて反発し、同じtitleのスタイルシートをスタイルシートセット(style sheet set)と呼ぶ.例えば「古典」に切り替えた後、perferredの「人文主義」はdisableされた.しかしpersistent style sheetは依然として機能している.
問題は、スクリプトを使用してスタイルシートセットを切り替える方法です.CSSOM仕様はこの目的を達成するために新しいAPIを導入した.
[Supplemental] interface Document {
readonly attribute StyleSheetList styleSheets;
...
void
enableStyleSheetsForSet(DOMString? name);
};
簡単です
document.enableStyleSheetsForSet('Geek風')
Geek風スタイルシートセットに切り替えることができます.
FF 4はこの方法をサポートしていますが、早いバージョンやWebKitエンジンを使ったSafari、Chromeなどはどうしますか?
一つの考えはdocumentを遍歴することです.styleSheetsは、標準によって規定された動作がそうであるため、titleに基づいてdisabled値を設定する.コードは次のとおりです.
// WebKit work！
document.enableStyleSheetsForSet = function(name) {
if (name != null) for (var i = 0, n = this.styleSheets.length; i < n; i++) {
var sheet = this.styleSheets[i]
if (sheet.title) sheet.disabled = !(sheet.title == name)
}
}
残念なことに、上記の合理的に見えるコードはWebKitの下でworkできません.WebKitのdocumentのためです.styleSheets集合にはすべてのalternate style sheetは含まれていません.
では、私たちは自分でスタイルの集合を取ることができますか?例えばdocument.querySelectorAll("style, link[rel~='stylesheet']") .実際にはだめです.WebKitはalternateスタイルシートを無視しているので、スタイルシートのdisabled=falseを直接設定しても、スタイルシートを有効にすることはできません(実際にはdisabled値はfalseです).
WebKitがこの点で基準に合わないと文句を言う以外に、私たちは仕方がないのではないでしょうか.
あきらめる前に、specをひっくり返してよく読むべきです.
直接コード:
if (!document.enableStyleSheetsForSet) document.enableStyleSheetsForSet = function(name) {
if (name != null) {
var meta = document.querySelector('meta[http-equiv="default-style"]')
if (!meta) {
meta = document.createElement('meta')
meta.httpEquiv = 'default-style'
document.head.appendChild(meta)
}
meta.content = name
}
}
非常に簡単な実現であり、すべてはdefault-styleという忘れられた特性に由来している.以上のコードはChrome 10でテストに合格しました.
PS.上記のコードでは、HTML 5に追加された属性である「document.head」に気づいたかもしれませんが、より早いブラウザにはこの属性はありません.似たような問題にはquerySelectorメソッドもあります.これらはブラウザ互換性の練習問題として読者に残されている.