js中 aaa.style 和 aaa.getAttribute(style) 等價嗎，有無區別？

01-14

js中 aaa.style 和 aaa.getAttribute("style") 等價嗎，有沒有什麼區別？
我自己在各種瀏覽器（IE6到chrome）測試的結果是一樣，沒發現什麼區別
是完全一樣嗎？

============================
我知道大概區別了，下面第二句在高級瀏覽器下面查不到信息
不過我想問的是，為什麼在IE6/7下第二句也可以成功執行？？？
是否說在ie6/7下aaa.style和aaa.getAttribute("style")等價？？？
alert(aaa.style.height);
alert(aaa.getAttribute("style").height);

有區別

首先區分property和attribute，兩個翻譯成中文都可以作為屬性，但是在實際上是有區別的。

在html標籤里的屬性稱為attribute

例如：&alaki&

這個dom element有3個attribute：href、data-tips、data-original_title

而property是那些它被創建的時候就有的屬性，例如attributes, autofocus, className, clientHeight。

特殊的是，假如

&alaki&

對於這個dom element來說，class不僅是attribute，同時它也是property，但是在dom.element中，只不過它叫className，這兩個是綁定的。

簡單來說，一些特殊的attribute將會轉換為property，腳踏兩條船，同樣的style也是個腳踏兩條船的傢伙。

假如是內聯樣式，通過getAttribute("style")是可以獲得的，但只能獲取到內聯樣式部分屬性，通過外部樣式表或者內嵌樣式都是無法獲得的，返回值是字元串。

假如不是內聯，那麼getAttribute("style")返回null或者空字元串，返回哪一個取決於這個瀏覽器的實現 Element.getAttribute()。

上面兩種情況，dom.style都將獲得完整樣式屬性，返回值為對象CSSStyleDeclaration

最後一個關於ie6和ie7的問題，

如圖

裡面有一句話：In IE5-7, accessing the style attribute gives an object

DOM Core在ie5-7裡面，getAttribute()的實現是跟dom.style一樣的效果的

路過

這是個老問題

現在應該早就不提了吧

懶的再寫

貼點兒老圖吧

由於寫的時間很早，細節上可能有變化

不過大致情況如此

理解下就好了

@alaki 已經說得很好了，我補充下。

elem.style 和 elem.getAttribute("style") 的關係我在這個回答里提到過一點，可以參考一下：webkit內核的瀏覽器為什麼removeAttribute("style")會失效? - 顧軼靈的回答（裡面有些鏈接好像失效了）

總的來說，style 的內容屬性你改成啥就會保留你改後的樣子，但是 IDL 屬性讀時會根據新的內容屬性中對應的 CSS 屬性來更新，寫 IDL 屬性時還會重新序列化內容屬性以和 IDL 屬性保持同步。

舉個例子：

HTML：

&&

JavaScript：

console.log(x.getAttribute("style")); // "color: red; aaa: bbb;" console.log(x.style.cssText); // "color: red;" console.log(x.style.color); // "red" x.style.color = "blue"; console.log(x.getAttribute("style")); // "color: blue;"

Are you kidding?

怎麼可能一樣，一個是CSSStyleDeclaration對象，一個是字元串。

謝邀。

不等價。碰巧等價也只是因為那是預置固有屬性。class(Name)開始就有兼容問題。自定義屬性完全行不通。比較可靠的是title這種。style我都懷疑是不是能作為對象用。

實踐建議是原生屬性一律.xxx，自定義屬性一律.getAttribute。後者考慮到兼容性，包括了data-*。

補充：

實測.getAttribute("style")是字元串。

ie7-不支持.setAttribue("style","")

IE6/7下 `elem.getAttribute("style")`和`elem.style`返回的都是`CSSStyleDeclaration`對象。

這是個BUG，在IE8之後已經被修復了。

`elem.getAttribute("style")`返回的是元素的style屬性上css文本(如果有點話，沒有返回null)，而`elem.style`返回`CSSStyleDeclaration`。

aaa.getAttribute("style")獲取的是aaa的內聯樣式字元串

在Secret Of The JavaScript Ninja 中有詳細講解這兩個的區別。

兩者儲存的數據結構不一樣。還有Attribute就是dom節點自帶的屬性，而Property是這個DOM元素作為對象。