摘要:設(shè)置為可以禁用此樣式表。僅是被導(dǎo)入的樣式表擁有,指向使用導(dǎo)入該樣式表的樣式表。樣式表的每一條記錄都會表示成一個對象,比如就會產(chǎn)生兩個對象。樣式遍歷對于內(nèi)聯(lián)樣式表的屬性進(jìn)行遍歷,即對的屬性進(jìn)行遍歷。
對象類型 CSSStyleSheet
表示的是使用 鏈接的外部樣式表,也可以是 定義的嵌入式樣式表。
var sheets = document.styleSheets; // 所有的 CSSStyleSheet 對象 var link = document.getElementsByTagName("link")[0]; var sheet = link.sheet; // IE8- 中是 .styleSheet
注意一下,如果 的 rel 屬性不是 stylesheet 的情況下,是無法獲取 sheet 屬性的。
重要的屬性有:
sheet: 對應(yīng)的 CSSStyleDeclaration 對象。
disabled: 設(shè)置為 true 可以禁用此樣式表。
link: 外部樣式表是 URL 地址,內(nèi)嵌樣式表是 null。
parentStyleSheet: 僅是被 @import 導(dǎo)入的樣式表擁有,指向使用 @import 導(dǎo)入該樣式表的樣式表。
cssRules: CSSStyleRule 對象集合。
重要的方法有:
deleteRule(index): 刪除 index 處的 Rule。 IE8- 為 removeRule(index)。
insertRule(selectorText + "{" + cssText + "}" , index): 向指定位置插入一條 Rule,內(nèi)容為 selectorText + "{" + cssText + "}"。IE8- 為 addRule(selectorText, cssText, index)。
CSSStyleRuleCSS 樣式表的每一條記錄都會表示成一個 CSSStyleRule 對象,比如:
div .relative { position: relative; } #sidebar { float: left; }
就會產(chǎn)生兩個 CSSStyleRule 對象。
這個對象主要使用的屬性有以下幾個:
cssText: 樣式的內(nèi)容,不包括選擇器文本和花括號。 IE8-不支持。
style: 這個條目的 CSSStyleDeclaration 對象。
selectorText: 返回當(dāng)前選擇器的文本,即上面的div .relative 和 #sidebar。
作者認(rèn)為,使用上面的 CSSStyleSheet.cssRules 結(jié)合這個對象的 selectorText 屬性可以查找到某一個特定的樣式,進(jìn)而進(jìn)行更改。
CSSStyleDeclaration所有支持 style 屬性的 HTML 元素的 HTMLElement 對象都有一個 style 屬性。這個屬性包含著所有通過標(biāo)簽中 style 屬性指定的樣式信息,但不包括外部樣式表和內(nèi)嵌樣式表的樣式信息。
style 屬性的屬性與樣式一一對應(yīng),通過設(shè)置相應(yīng)的屬性便可以達(dá)到控制樣式的目的。
使用短劃線的屬性,例如 font-size,對應(yīng)的屬性名就是它的駝峰命名形式,即 .fontSize。
由于 float 是 JavaScript 的關(guān)鍵字,不能直接使用,故使用 .cssFloat 代替(IE8- 中是 .styleFloat)。
var el = document.getElementById("div1"); el.style.width = "100px"; el.style.cssFloat = "left"; el.style.backgroundImage = "url(/images/logo.png)"
屬性和方法:
length: 所有已經(jīng)設(shè)置了值的屬性個數(shù)。
getPropertyValue(propName): 獲得某個屬性的值,未設(shè)置返回 null。
getPropertyPriority(propName): 檢測某個屬性是否設(shè)置了 !important,是返回 "important",否返回 ""。
removeProperty(propName): 刪除屬性。
setProperty(propName, value, "important" | ""): 設(shè)置某個屬性的值和優(yōu)先級。
對于內(nèi)聯(lián)樣式表的屬性進(jìn)行遍歷,即對 HTMLElement 的 .style 屬性進(jìn)行遍歷。
也許你們會想,使用 for in 遍歷不就可以了嗎?真是這么簡單便不會來說了。
CSSStyleDeclaration 屬性即使對于沒有設(shè)置的值也是有定義的,故所有的屬性在這個對象里面都有定義,故不能使用 for in。
但是這個對象提供給了我們一種方式,它將所有賦值了的屬性全部使用 數(shù)字:屬性名 映射在對象中。在上面也提到,length 屬性是所有已賦值的屬性的個數(shù)。那么我們可以使用如下方法遍歷。
var style = document.getElementById("sidebar").style; for(var i = 0; i < style.length; i++) { console.log(style[i] + ": " + style[style[i]]); }
僅僅是獲得非常少的樣式信息并不是我們所需要的,如何獲得這個元素的所有樣式信息,包括外部樣式表,內(nèi)嵌樣式表,內(nèi)聯(lián)樣式表,瀏覽器默認(rèn)樣式?
IE9+ 以及其他現(xiàn)代瀏覽器提供給了我們 window.getComputedStyle(el) 函數(shù)。
傳入一個 DOM 元素,返回一個 CSSStyleDeclaration,這個對象是它表現(xiàn)出來的樣式(即通過層疊之后的樣式)。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/111125.html
摘要:擴(kuò)展選擇符的核心是兩個方法和。目前已完全支持的瀏覽器有和。在寫模式下,會根據(jù)指定的字符串創(chuàng)建新的子樹,然后用這個子樹完全替換調(diào)用元素。在刪除帶有事件處理程序或引用了其他對象子樹時,就有可能導(dǎo)致內(nèi)存占用問題。刪除集合中指定位置的規(guī)則。 DOM擴(kuò)展 選擇符API Selectors API Level 1 的核心是兩個方法:querySelector()和querySelectorAll(...
摘要:對象包含下列屬性返回整條規(guī)則對應(yīng)的文本包括選擇符和花括號返回當(dāng)前規(guī)則的選擇符一個對象返回規(guī)則中所有的樣式當(dāng)前規(guī)則所屬的樣式表表示規(guī)則類型的常量值。從文檔中分離解除引用推薦在使用完范圍后再執(zhí)行上述兩個步驟。 DOM1級主要定義了HTML和XML文檔的底層結(jié)構(gòu),DOM2和DOM3則在DOM1的基礎(chǔ)上引入了更多的交互功能,支持了更高級的XML特性。DOM2和DOM3分為許多模塊(模塊之間具...
摘要:設(shè)置為可以禁用此樣式表。僅是被導(dǎo)入的樣式表擁有,指向使用導(dǎo)入該樣式表的樣式表。樣式表的每一條記錄都會表示成一個對象,比如就會產(chǎn)生兩個對象。樣式遍歷對于內(nèi)聯(lián)樣式表的屬性進(jìn)行遍歷,即對的屬性進(jìn)行遍歷。 對象類型 CSSStyleSheet 表示的是使用 鏈接的外部樣式表,也可以是 定義的嵌入式樣式表。 var sheets = document.styleSheets; // 所有的 ...
摘要:如果不需要偽元素信息,第二個參數(shù)可以輸操作樣式表類型表示的是樣式表,包括通過元素包含的樣式表和在元素中定義的樣式表表示樣式表是否被禁用的布爾值。包括元素的高度可見的水平滾動條的高度上邊框高度和下邊框高度。顯示處理指令節(jié)點。 DOM2和DOM3 DOM變化 針對XML命名空間的變化 有了XML命名空間,不同XML文檔的元素就可以混合在一起,共同構(gòu)成格式良好的文檔,而不必?fù)?dān)心發(fā)生命名沖突...
摘要:中的所有對象都是以對象的形式實現(xiàn)的。這意味著中的對象與原生對象的行為或活動特點并不一致。該屬性指向表示整個文檔的文檔節(jié)點。同時由要插入的節(jié)點占據(jù)其位置。返回被移除的節(jié)點。操作類名操作類名時,需要通過屬性添加刪除和替換類名。 Note:IE中的所有DOM對象都是以COM對象的形式實現(xiàn)的。這意味著IE中的DOM對象與原生Javascript對象的行為或活動特點并不一致。 DOM1級主要定義...
閱讀 2580·2021-11-24 09:38
閱讀 2612·2019-08-30 15:54
閱讀 926·2019-08-30 15:52
閱讀 1914·2019-08-30 15:44
閱讀 2721·2019-08-30 13:48
閱讀 776·2019-08-29 16:21
閱讀 1006·2019-08-29 14:03
閱讀 2221·2019-08-28 18:15