使用DOM操縱樣式表

??操縱元素的Style樣式屬性（所有的均對于CSS的內聯式）

對于每個CSS樣式，Style對象都包含了一個相對應的屬性，只需要用到style屬性即可；

Div.style.color= "red"; //給div元素設置字體顏色為紅色

對于兩個詞的樣式，在JavaScript樣式屬性的格式去駝峰命名法；

Div.style.backgroundColor= "#000"; //給div元素設置背景色為黑色

DOM為style對象提供了方法用來與CSS樣式定義的單個部分交互

??getPropertyValue(propertyName)——返回CSS屬性的屬性值的字符串。這個propertyName必須是CSS樣式中指定的格式；

??getPropertyPriority()——如果再CSS屬性規則中指定了"!important"，則返回字符串"!important"，否則返回一個空的字符串；

??item(index)——返回指定索引的CSS屬性名稱;

??removeProperty(propertyName)——從CSS定義中刪除propertyName。

??setProperty(propertyName,value,prioriry)——設置CSS屬性propertyName為value以及給定的優先級("important"或者一根空字符串);

??操縱外部樣式表以及style元素中的樣式

使用document.styleSheets集合,該集合包含了在一個網頁所有樣式表的應用,也包括所有的style屬性。

??disabled——表示樣式表是否被禁用的布爾值。這個屬性是可讀/寫的，將這個值設置為true可以禁用樣式表；

??href——如果樣式表是通過<link>包含的，則是樣式表的URL；否則，是null；

??media——當前樣式表支持的所有媒體類型的集合。與所有DOM集合一樣，這個集合也有一個length屬性和一個item()方法。也可以使用方括號語法取得結合中?特定的項。如果集合是空列表項，表示樣式表適用于所有媒體。在IE中，media是一個反映<link>和<style>元素?media特性的字符串；

??ownerNode——指定樣式表的DOM節點(<link/>或者<style/>元素)。如果當前樣式表是其它樣式表通過@import導入的，則這個屬性值為null。IE不支持這個屬性；

??parentStyleSheet——如果樣式表被包含在CSS@import語句中，本屬性指向語句發現的樣式；

??title——ownerNode中的title屬性的值；

??type——樣式表的mine類型。對CSS樣式表而言，通常是“type/css”；

（PS：一條規則上的style對象不是只讀的，我們可以更改它。但是更改一條CSS規則會影響頁面上所有使用規則的元素）

??操縱最終樣式

一個元素可能有多個樣式作用于其上，最終在屏幕上顯示的樣式，我們稱為最終樣式。最終樣式由所有的樣式信息（包含內聯樣式和CSS規則）組成，用來真實指示元素在屏幕是如何顯示的（存在兼容性問題，IE和DOM有不同的實現方式）；

??IE中的最終樣式

IE在每個元素上提供了一個currentStyle對象，該對象包含了從元素背景色到任何相關CSS規則的style對象的所有屬性。currentStyle對象與style工作方式相同，有同樣的屬性和方法。

??DOM中的最終樣式

DOM對于給定的元素提供了一個方法getComputedStyle()來創建一個類似style的對象，例如:hover或者:first-letter（如果不需要，第二個參數可為空）。該方法接收兩個參數，一個是要獲取樣式的元素，一個是偽元素，我們可以從document.defaultView對象訪問該方法（IE和Safari瀏覽器不支持document.defaultView）。

??獲取IE和DOM的最終樣式(已解決兼容性問題)

var obj = document.getElementById("test"); var style = null; if (window.getComputedStyle) {style = window.getComputedStyle(obj, null); // DOM } else { style = obj.currentStyle; // IE }

轉載于:https://www.cnblogs.com/HackerBlog/p/6036241.html

總結

以上是生活随笔為你收集整理的JavaScript总结（六）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。