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()方法。也可以使用方括號語法來取得集合中指定的項目。如果集合是空列表，則表示樣式表適用於所有媒體。在IE瀏覽器中，media是一個反映和

• ownerNode：指向擁有當前樣式表的節點的指針，樣式表可能是在HTML中透過或

• 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集合中指定的位置插入rule字串。 IE不支援該方法，但有一個類似的addRule()方法。

應用於文檔的所有樣式表都是透過document.styleSheets集合來表示的。透過這個集合的length屬性可以知道文件中樣式表的數量，而透過方括號語法或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中文網（www.php.cn）！