摘要:回顧什么是內聯(lián)樣式所謂內聯(lián)樣式,就是通過頁面元素的屬性為當前元素定義樣式。對象提供的屬性和方法可以幫助我們獲取樣式的具體內容。遍歷對象由于對象具有屬性,返回該對象的屬性的數(shù)量。方法通過獲取的樣式屬性名,這種方式也可以通過方式進行替換。
回顧什么是內聯(lián)樣式
所謂內聯(lián)樣式,就是通過 HTML 頁面元素的 style 屬性為當前元素定義 CSS 樣式。
以下代碼示例,就是通過 style 屬性定義 CSS 內聯(lián)樣式:
這是一個段落內容.
獲取內聯(lián)樣式值得注意的是:
HTML 頁面的結構與樣式并沒有有效分離
定義的 CSS 樣式只針對當前元素有效
由于設置內聯(lián)樣式的方式是利用 HTML 頁面元素的 style 屬性實現(xiàn)的,所以獲取內聯(lián)樣式主要是依靠 DOM 中獲取屬性方式實現(xiàn)。
Element 對象的 getAttribute() 方法獲取 style 屬性的值。
通過 DOM 對象 HTMLElement 的 style 屬性獲取。
Element 對象的 getAttribute() 方法Element 對象的 getAttribute() 方法的語法結構如下:
var value = element.getAttribute("style");
以上語法結構中調用 getAttribute() 方法的 element 表示 HTML 頁面元素,傳遞的參數(shù) style 表示屬性名稱,而返回值則是指定屬性名對應的值(內聯(lián)樣式的聲明內容)。
我們可以通過以下示例代碼,學習如何通過 getAttribute() 方法獲取內聯(lián)樣式:
這是一個段落內容.
上述示例代碼的輸出結果如下:
DOM 對象的 style 屬性由于 DOM 規(guī)范標準中將 Document 對象定位的 HTML 頁面元素解析為相應的對象,而這些對象都繼承于 HTMLElement 對象。該對象提供了 style 屬性,返回 CSSStyleDeclaration 對象。
我們可以通過以下示例代碼,學習如何通過 HTMLElement 對象的 style 屬性獲取內聯(lián)樣式:
這是一個段落內容.
上述示例代碼,通過 style 屬性會得到 CSSStyleDeclaration 對象,該對象表示一個 CSS 屬性鍵值對的集合。
CSSStyleDeclaration 對象通過 element.style 返回的是 CSSStyleDeclaration 對象。CSSStyleDeclaration 對象表示一個CSS屬性鍵值對的集合。
CSSStyleDeclaration 對象提供的屬性和方法可以幫助我們獲取 CSS 樣式的具體內容。
屬性或方法 | 描述 |
---|---|
cssText | 聲明塊的文本內容。 |
length | 屬性的數(shù)量。 |
item() | 返回屬性名。 例如: nameString= styleObj.item(0) Alternative: nameString= styleObj[0] |
getPropertyValue() | 返回屬性值。例如:?valString=?styleObj.getPropertyValue("color") |
通過 element.style.cssText 屬性獲取 CSS 聲明塊的文本內容。
我們可以通過以下示例代碼,學習如何通過 cssText 屬性獲取 CSS 聲明塊的文本內容:
這是一個段落內容.
上述示例代碼的輸出結果如下:
遍歷 CSSStyleDeclaration 對象值得注意的是: cssText 屬性返回的是 CSS 聲明塊的文本內容,解析操作時會比較麻煩。
由于 CSSStyleDeclaration 對象具有 length 屬性,返回該對象的屬性的數(shù)量。我們可以通過這一特性實現(xiàn)遍歷 CSSStyleDeclaration 對象,從而得到所有屬性名和相應的值。
我們可以通過以下示例代碼,學習如何遍歷 CSSStyleDeclaration 對象:
這是一個段落內容.
上述示例代碼的輸出結果如下:
在上述示例代碼中,我們利用 CSSStyleDeclaration 對象的 length 屬性控制遍歷過程。
在遍歷過程中,我們先利用 CSSStyleDeclaration 對象的 item() 方法得到每一個 CSSStyleDeclaration 對象的屬性名,再利用 CSSStyleDeclaration 對象的 getPropertyValue() 方法根據(jù)屬性名得到相應的值。
item() 方法通過 element.style.item(index) 獲取 CSS 的樣式屬性名,這種方式也可以通過 element.style[index] 方式進行替換。換句話講,這兩種方式是等價的。
我們可以通過以下示例代碼,學習對比這兩種方式:
for ( var i=0; i上述示例代碼的輸出結果如下:
getPropertyValue() 方法通過 element.style.item.getPropertyValue() 獲取 CSS 的樣式屬性值,這種方式也可以通過 element.style[propertyName] 方式進行替換。
我們可以通過以下示例代碼,學習對比這兩種方式:
for ( var i=0; i上述示例代碼的輸出結果如下:
屬性鏈方式操作由于通過 element.style 返回的是 CSSStyleDeclaration 對象,所以我們也可以通過 element.style.attrName 的方式獲取具體的樣式屬性的值。
我們可以通過以下示例代碼,學習這種獲取方式:
這是一個段落內容.
本教程免費開源,任何人都可以免費學習、分享,甚至可以進行修改。但需要注明作者及來源,并且不能用于商業(yè)。
本教程采用知識共享署名-非商業(yè)性使用-禁止演繹 4.0 國際許可協(xié)議進行許可。
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91737.html
摘要:系列教程是一套免費開源,任何人都可以免費學習分享,甚至可以進行修改。本文是這套系列教程的索引也就是目錄第一回介紹在最開始,我們先來了解是什么的作用,以及瀏覽器的支持是怎么樣的。 《EASYDOM》系列教程是一套免費、開源,任何人都可以免費學習、分享,甚至可以進行修改。但需要注明作者及來源,并且不能用于商業(yè)。 本文是這套系列教程的索引(也就是目錄): 第一回 DOM 介紹 在最開始,我...
摘要:元素之間的關系在元素樹結構中,主要具有以下三層關系。祖先與后代如果我們將頁面中某一個元素作為祖先的話,那包含在該元素內的所有元素除子級之外的都可以稱為該元素的后代。兄弟關系具有相同父級元素的兩個或幾個元素之間就是兄弟關系。 DOM 元素樹結構與 DOM 節(jié)點樹結構很相似,區(qū)別僅在于是利用節(jié)點解析 HTML 元素,還是利用元素解析 HTML 元素。 DOM 樹結構 還記得下面這張圖嗎? ...
摘要:對象提供了屬性和方法實現(xiàn)定位頁面元素功能,這也是的標準規(guī)范中對象的主要應用之一。是返回值,表示定位元素的集合,是一個集合。定位匹配選擇器的第一個元素。方法定位頁面元素所返回的集合就是靜態(tài)集合。 Document 對象提供了屬性和方法實現(xiàn)定位頁面元素功能,這也是 DOM 的標準規(guī)范中 Document 對象的主要應用之一。 定位頁面元素方法 目前 Document 對象提供實現(xiàn)定位頁面元...
摘要:最后表示,就是中表示各個對象之間的關系。的定義由于的標準規(guī)范是由組織起草并定義的,所以對的定義是目前最權威的解釋。瀏覽器的支持目前幾乎所有的瀏覽器都支持的內容。而組織定義的標準規(guī)范,主要也是為了解決在不同瀏覽器的差異問題。 DOM 是什么 DOM 被設計用于解析 HTML 頁面文檔,方便 JavaScript 語言通過 DOM 訪問和操作 HTML 頁面中的內容。 DOM 是由 W3C...
摘要:簡單來說,節(jié)點作為樹結構中的連接點,最終構成了完整的樹結構。節(jié)點樹結構通過節(jié)點概念,我們可以將原本的樹結構改成節(jié)點樹結構進行表示。節(jié)點之間的關系中的表示模型,也可以用來表示節(jié)點樹結構中節(jié)點之間的關系。值得注意的是和元素并不是兄弟關系。 DOM 樹結構 DOM 之所以可以訪問和更新 HTML 頁面中的內容、結構和樣式,是因為 DOM 將 HTML 頁面解析為一個 樹結構。 例如下面這段代...
閱讀 3094·2021-08-03 14:05
閱讀 2140·2019-08-29 15:35
閱讀 678·2019-08-29 13:30
閱讀 3169·2019-08-29 13:20
閱讀 2531·2019-08-23 18:15
閱讀 1797·2019-08-23 14:57
閱讀 2213·2019-08-23 13:57
閱讀 1310·2019-08-23 12:10