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