JavaScript文檔物件模型-樣式表的操作-js教程-PHP中文網

樣式表是透過CSSStyleSheet類型來表示的。它包括透過 元素包含的樣式表和在 元素中定義的樣式表。 元素由HTMLLinkElement類型來表示， 元素則由HTMLStyleElement類型來表示。 CSSStyleSheet類型比較通用，它只表示樣式表，而不會管這些樣式表在HTML中是如何定義的。另外，HTMLLinkElement類型和HTMLStyleElement類型允許修改HTML特性，而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是一個反映 和 元素media特性值的字串。

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

應用於文檔的所有樣式表都是透過document.styleSheets集合來表示的。透過這個集合的length屬性可以知道文件中樣式表的數量，而透過方括號語法或item()方法就可以存取每一個樣式表。例如下面的程式碼：

var styleSheet = null; for(var i = 0,len = document.styleSheets.length; i 登入後複製

所得到的結果如下圖：

上面的程式碼會輸出每一個樣式表的href屬性。

不同的瀏覽器的document.styleSheets回傳的樣式表也不相同。所有的瀏覽器都會包含 元素和rel特性被設定為「stylesheet」的 元素引入的樣式表。 IE和Opera瀏覽器也會包含rel特性被設定為alternate stylesheet的 元素所引入的樣式表。

我們也可以直接透過 和 元素取得CSSStyleSheet物件。在DOM中規定了一個包含CSSStyleSheet物件的屬性－sheet屬性。除了IE瀏覽器之外，其它所有的瀏覽器都支援這個屬性。如果想要在所有的瀏覽器中都能取得樣式表對象，可以像下面這樣寫程式碼：

function getStyleSheet(element){ return element.sheet || element.styleSheet; } //获取第一个 元素引入的样式表 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）！