EASYDOM系列教程 之獲取內聯樣式

2021-09-16 13:49:06 字數 2920 閱讀 6596

所謂內聯樣式，就是通過 html 頁面元素的 style 屬性為當前元素定義 css 樣式。

以下**示例，就是通過 style 屬性定義 css 內聯樣式:

這是乙個段落內容.
值得注意的是:

由於設定內聯樣式的方式是利用 html 頁面元素的 style 屬性實現的，所以獲取內聯樣式主要是依靠 dom 中獲取屬性方式實現。

element 物件的 getattribute() 方法的語法結構如下:

var value = element.getattribute('style');
以上語法結構中呼叫 getattribute() 方法的 element 表示 html 頁面元素，傳遞的引數 style 表示屬性名稱，而返回值則是指定屬性名對應的值（內聯樣式的宣告內容）。

我們可以通過以下示例**，學習如何通過 getattribute() 方法獲取內聯樣式:

這是乙個段落內容.
上述示例**的輸出結果如下:

由於 dom 規範標準中將 document 物件定位的 html 頁面元素解析為相應的物件，而這些物件都繼承於 htmlelement 物件。該物件提供了 style 屬性，返回 cssstyledeclaration 物件。

我們可以通過以下示例**，學習如何通過 htmlelement 物件的 style 屬性獲取內聯樣式:

這是乙個段落內容.
上述示例**，通過 style 屬性會得到 cssstyledeclaration 物件，該物件表示乙個 css 屬性鍵值對的集合。

通過 element.style 返回的是 cssstyledeclaration 物件。cssstyledeclaration 物件表示乙個css屬性鍵值對的集合。

cssstyledeclaration 物件提供的屬性和方法可以幫助我們獲取 css 樣式的具體內容。

屬性或方法

描述csstext

宣告塊的文字內容。

length

屬性的數量。

item()

返回屬性名。 例如: namestring= styleobj.item(0) alternative: namestring= styleobj[0]

getpropertyvalue()

返回屬性值。例如: valstring= styleobj.getpropertyvalue('color')

通過 element.style.csstext 屬性獲取 css 宣告塊的文字內容。

我們可以通過以下示例**，學習如何通過 csstext 屬性獲取 css 宣告塊的文字內容:

這是乙個段落內容.
上述示例**的輸出結果如下:

值得注意的是:csstext 屬性返回的是 css 宣告塊的文字內容，解析操作時會比較麻煩。

由於 cssstyledeclaration 物件具有 length 屬性，返回該物件的屬性的數量。我們可以通過這一特性實現遍歷 cssstyledeclaration 物件，從而得到所有屬性名和相應的值。

我們可以通過以下示例**，學習如何遍歷 cssstyledeclaration 物件:

這是乙個段落內容.
上述示例**的輸出結果如下:

在上述示例**中，我們利用 cssstyledeclaration 物件的 length 屬性控制遍歷過程。

在遍歷過程中，我們先利用 cssstyledeclaration 物件的 item() 方法得到每乙個 cssstyledeclaration 物件的屬性名，再利用 cssstyledeclaration 物件的 getpropertyvalue() 方法根據屬性名得到相應的值。

通過 element.style.item(index) 獲取 css 的樣式屬性名，這種方式也可以通過 element.style[index] 方式進行替換。換句話講，這兩種方式是等價的。

我們可以通過以下示例**，學習對比這兩種方式:

for ( var i=0; i上述示例**的輸出結果如下:


通過 element.style.item.getpropertyvalue() 獲取 css 的樣式屬性值，這種方式也可以通過 element.style[propertyname] 方式進行替換。


我們可以通過以下示例**，學習對比這兩種方式:


for ( var i=0; i上述示例**的輸出結果如下:


由於通過 element.style 返回的是 cssstyledeclaration 物件，所以我們也可以通過 element.style.attrname 的方式獲取具體的樣式屬性的值。


我們可以通過以下示例**，學習這種獲取方式:


這是乙個段落內容.
本教程免費開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要註明作者及**，並且不能用於商業。

本教程採用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

EASYDOM系列教程 之屬性操作

element 物件提供了一些方法實現 html 元素的屬性操作，這種操作要比 node 物件提供的方法操作屬性節點要更便捷。element 物件提供了 getattribute 方法用於獲取指定元素的屬性值，其語法結構如下 var attribute element.getattribute at...

EASYDOM系列教程 之插入節點

node 物件提供了一些用於向 html 頁面插入節點的方法，通過這些方法我們可以實現向 html 頁面新增元素，或者移動 html 頁面中的元素。var parent document.getelementbyid parent var button document.createelement ...

EASYDOM系列教程 之Node介紹

dom 的標準規範中提供了 node 物件，該物件主要提供了用於解析 dom 節點樹結構的屬性和方法。dom 樹結構主要是依靠節點進行解析，稱為 dom 節點樹結構。node 物件是解析 dom 節點樹結構的主要入口。node 物件提供的屬性和方法，可以實現遍歷節點 插入節點和替換節點等操作。而這些...