動的スタイルクラスのカプセル化JSコード_javascriptスキル

ファイル名 StyleSheet.js

コードをコピー コードは次のとおりです:

// CssRule getRule メソッドは StyleSheet によって提供され、直接は作成されません。 =rule.selectorText;
this.index = null;
function StyleSheet() {
var head = document.getElementsByTagName("head")[0];新しいタグを作成することによる新しいスタイル
/*
FF
では CSS ファイルがインポートされないと document.createStyleSheet メソッドが失敗するため、ここでは Document.createStyleSheet は使用されません
*/
var style = document.createElement("style");
style.type = "text/css";
this.CatchStyle(document.styleSheets.length - 1);
}
StyleSheet.prototype = {
// 既存のスタイルを直接キャプチャできます
CatchStyle: function(index) {
this.style = document.styleSheets[index]
if (navigator. userAgent.indexOf("MSIE") this.style.addRule = function(selector, style) {
varindex = this.cssRules.length ;
this.insertRule(セレクター "{" スタイル "}", インデックス);
this.style.removeRule = function(index) {
this.deleteRule(index); 🎜>} ;
}
},
//スタイルを追加
AddRule: function(selector, style) {
this.style.addRule(selector, style); ,
// スタイルを削除
RemoveRule: function(index) {
this.style.removeRule(index);
},
// すべてのスタイルを取得
getRules: function( ) {
if (this.style.rules) { //IE
return this.style.rules;
}
return this.style.cssRules; //IE 以外
} ,
//セレクターを通じてスタイルを取得します
getRule: function(selector) {
var rules = this.getRules();
for (var i = 0; i < rules.length ; i ) {
var r = rules[i];
if (r.selectorText == セレクター) {
var ルール = new CssRule(r); 🎜>return ルール;
}
}
return null;


サンプルコードを呼び出します




コードをコピーします


コードは次のとおりです:


" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">