JavaScript ドキュメント オブジェクト モデル スタイル シートの操作

スタイルシートはCSSStyleSheetタイプで表されます。これには、 要素を通じて組み込まれたスタイル シートと、

次のメソッドを使用して、ブラウザが DOM2 レベルのスタイル シートをサポートしているかどうかを検出します:

var supportsDOM2StyleSheets = document.implementation.hasFeature("StyleSheets","2.0");

CSSStyleSheet は StyleSheet を継承します。 StyleSheet は、非 CSS スタイル シートを定義するための基本インターフェイスとして使用できます。 StyleSheet インターフェースから継承される属性は次のとおりです:

• disabled: スタイルシートを無効にするかどうか。このプロパティは読み取り可能であり、値を true に設定するとスタイル シートが無効になります。

• href: スタイル シートが を通じて含まれている場合、この属性はスタイル シートの URL であり、それ以外の場合は null です。

• media: 現在のスタイルシートでサポートされているすべてのメディアタイプのコレクション。すべての DOM コレクションと同様、このコレクションにも length プロパティと item() メソッドがあります。角かっこ構文を使用して、コレクション内の指定された項目を取得することもできます。コレクションが空のリストの場合、スタイル シートがすべてのメディアに適用されることを意味します。 Internet Explorer では、メディアは 要素および

• ownerNode: 現在のスタイル シートを所有するノードへのポインタ。スタイル シートは、 要素を通じて HTML に導入できます。現在のスタイル シートが @import 経由でインポートされた場合、このプロパティの値は null です。 IE ブラウザはこの属性をサポートしていません。

• parentStyleSheet: 現在のスタイル シートが @import を通じてインポートされる場合、この属性は、それをインポートしたスタイル シートへのポインターになります。

• title: ownerNode の title 属性。

• type: スタイルシートのタイプを表す文字列。 CSS スタイル シートの場合、この文字列は「type/css」です。

• disabled 属性を除き、上記の属性はすべて読み取り専用属性です。上記のプロパティに加えて、CSSStyleSheet は次のプロパティとメソッドもサポートしています。

• cssRules: スタイルシートに含まれるスタイルルールのコレクション。 IE はこの属性をサポートしていませんが、同様の rules 属性があります。

• ownerRule: スタイルシートが @import を通じてインポートされる場合、この属性はインポートを表すルールを指すポインターであり、それ以外の場合は null です。 IE はこの属性をサポートしていません。

• deleteRule(index): cssRules コレクション内の指定された位置にあるルールを削除します。 IE はこのメソッドをサポートしていませんが、同様の RemoveRule() メソッドがあります。

• insertRule(rule,index): cssRules コレクション内の指定された位置にルール文字列を挿入します。 IE はこのメソッドをサポートしていませんが、同様の addRule() メソッドがあります。

ドキュメントに適用されるすべてのスタイル シートは、 document.styleSheets コレクションによって表されます。ドキュメント内のスタイル シートの数は、このコレクションの長さプロパティを通じて知ることができ、各スタイル シートには角かっこ構文または item() メソッドを通じてアクセスできます。たとえば、次のコード:

var styleSheet = null;
for(var i = 0,len = document.styleSheets.length; i < len; i++){
    styleSheet = document.styleSheets[i];
    console.info(styleSheet.href);
}

結果は以下のようになります:

上記のコードは、各スタイル シートの href 属性を出力します。

異なるブラウザの document.styleSheets によって返されるスタイルシートも異なります。すべてのブラウザには、

要素と

function getStyleSheet(element){
    return element.sheet || element.styleSheet;
}
//获取第一个<link>元素引入的样式表
var link = document.getElementsByTagName("link")[0];
var sheet = getStyleSheet(link);

CSS ルール (CSSRule)

CSSRule オブジェクトは、スタイル シート内の各ルールを表します。実際、CSSRule は他の多くの型によって継承される基本クラスであり、最も一般的なのはスタイル情報を表す CSSStyleRule 型です。 CSSStyleRule オブジェクトには次のプロパティが含まれます:

• cssText：返回整条规则对应的文本。由于浏览器对样式表内部的处理方式各不相同，返回的文本可能会与样式表中的实际文本不一样。IE浏览器不支持这个属性。

• parentRule：如果当前规则是导入规则，这个属性引用的就是导入规则。否则这个值为null。IE浏览器不支持这个属性。

• parentStyleSheet：当前规则所属的样式表。IE浏览器不支持这个属性。

• selectorText：返回当前规则的选择符文本。由于浏览器对样式表内部的处理方式各不相同，返回的文本可能会与样式表中的实际文本不一样。IE浏览器不支持这个属性。在Firefox、chrome、Safari和IE浏览器中该属性为只读属性，Opera浏览器允许修改这个属性。

• style：一个CSSStyleDeclaration对象，可以通过它设置和获取规则中特定的样式值。

• type：表示规则类型的常量值。对于样式规则，该值为1。IE浏览器不支持这个属性。

上面的这些属性中最常用的有三个：cssText、selectorText和style。

cssText属性和style.cssText属性类似，但是并不相同。cssText获取的文本包括选择符文本和围绕样式信息的花括号，而style.cssText只包含样式信息。另外，cssText是只读的，而style.cssText可以被读写。

在多数情况下，我们使用style属性就可以完成所有操作样式规则的工作了。这个对象就像是每个元素上的style属性一样，可以通过它读取和修改规则中的样式信息。例如下面的CSS规则：

div.box{
    background-color:#f00;
    width:100px;
    height:120px;
}

假设这条规则位于页面中的第一个样式表中，而这个样式表中只用这一条规则。那么通过下面的代码就可以获取这条规则的所有信息：

var sheet = document.styleSheets[0];
//获取规则列表
var rules = sheet.cssRules || sheet.rules;
//取得第一条规则
var rule = rules[0];
console.info(rule.selectorText);  //"div.box"                             
console.info(rule.style.cssText);  //完整的css代码
console.info(rule.style.backgroundColor);  //rgb(255,0,0)
console.info(rule.style.width);  //"100px"                      
console.info(rule.style.height);  //"120px"

通过上面的方式，我们就可以确定与规则相关的样式信息。我们也可以通过这种方式来修改样式信息，例如下面的代码：

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
var rule = rules[0];
rule.style.backgroundColor = "#0f0";

通过这种方式修改的规则会影响页面中使用该规则的所有元素。

 创建样式规则

DOM规定要向现有的样式表中添加规则需要使用insertRule()方法。这个方法接收两个参数：要添加的规则和插入规则的位置。例如：

sheet.insertRule("body{background-colo:#f2f2f2}",0);    //DOM中的方法

在上面的例子中向样式表中插入了一条规则，修改页面的背景颜色。插入的规则将成为样式表的第一条规则（插入到0位置）。注意：规则的次序在确定层叠之后应用到文档的规则是非常重要的。FireFox、Chrome、Safari和Opera浏览器都支持insertRule()方法。

在IE中有一个类似的方法——addRule()。该方法接收两个必选参数：选择符文本和CSS样式信息，以及一个可选参数：插入规则的位置。在IE中插入规则的代码如下：

sheet.addRule("body{background-colo:#f2f2f2}",0);    //IE中的方法

使用addRule()方法来添加规则时，最多可以添加4095条规则，超出上限会出现错误。

为了统一所有的浏览器的向样式表中插入规则的方法，可以自定义一个通用插入规则函数，这个函数接收4个参数：要向其中添加规则的样式表和与addRule()方法相同的3个参数：

function insertRule(sheet,selectorText,cssText,position){
    if(sheet.insertRule){
        sheet.insertRule(selectorText+ "{" + cssText + "}",position);
    }else if(sheet.addRule){
        sheet.addRule(selectorText,cssText,position);
    }
}

   

调用上面函数的方法为：

insertRule(document.styleSheets[0],"body","background-color:#99ce7e",0);

上面的调用代码在样式表的第一个位置插入一条规则，修改页面的body颜色为浅绿色。

 删除样式规则

如果需要从样式表中删除规则可以调用deleteRule()方法。该方法接收一个参数：要删除规则的位置。例如，如需要删除样式表中的第一条规则，可以使用下面的代码：

sheet.deleteRule(0);       //DOM方法

在IE浏览器中支持的删除规则的方法是removeRule()。它的使用方法也相同，例如：

sheet.removeRule(0);       //IE的方法

下面是一个跨浏览器删除样式表规则的函数。该函数接收2个参数：要操作的样式表和要删除的规则的索引。

function deleteRule(sheet,index){
    if(sheet.deleteRule){
        sheet.deleteRule(index);
    }else if(sheet.removeRule){
        sheet.removeRule(index);
    }
}

调用上面函数的方法为：

deleteRule(document.styleSheets[0],0);

删除规则可能会影响到CSS的重叠效果，实际使用中应该谨慎使用。

上記は JavaScript ドキュメント オブジェクト モデル スタイルのシート操作の内容です。その他の関連内容については、PHP 中国語 Web サイト (www.php.cn) を参照してください。