搜尋
首頁web前端H5教程js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别?

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);

回复内容:

路过
这是个老问题
现在应该早就不提了吧

懒的再写
贴点儿老图吧
js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别?
js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别?由于写的时间很早,细节上可能有变化
不过大致情况如此
理解下就好了 有区别

首先区分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的问题,
如图
js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别?里面有一句话 :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:
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"x"</span> <span class="na">style=</span><span class="s">"color: red; aaa: bbb;"</span><span class="nt">></div></span>
怎么可能一样,一个是CSSStyleDeclaration对象,一个是字符串。 Are you kidding?
js中 aaa.style 和 aaa.getAttribute('style') 等价吗,有无区别? aaa.style的 style 是dom property, aaa.getAttribute('style') 得到的是html attribute;

html attribute由 html 定义,dom property 由 DOM 定义;
1. 许多 attribute 有与之对应的 property
2. 一些 attribute 没有对应的 property
3. 一些 property 也没有对应的 attribute

比较通用的规则是,html attribute 用于初始化 dom property 的值,之后除非脚本变更,一般不改变,而 dom property则随着用户的交互行为而随之改变,如 input 的 value。

题主的例子不好看出差别,换成 input 的 value 更能看出区别 谢邀。

不等价。碰巧等价也只是因为那是预置固有属性。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`。 在Secret Of The JavaScript Ninja 中有详细讲解这两个的区别。 aaa.getAttribute('style')获取的是aaa的内联样式字符串
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML5的遺產:當前了解H5HTML5的遺產:當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代碼:可訪問性和語義HTMLH5代碼:可訪問性和語義HTMLApr 09, 2025 am 12:05 AM

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構,提高SEO。 2.ARIA屬性如aria-label增強可訪問性,輔助技術用戶可順利使用網頁。

H5與HTML5相同嗎?H5與HTML5相同嗎?Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多數情況下是相同的,但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準,包含新標籤和API。 2."h5"通常是HTML5的簡稱,但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

H5的功能是什麼?H5的功能是什麼?Apr 07, 2025 am 12:10 AM

H5,即HTML5,是HTML的第五個版本,它為開發者提供了更強大的工具集,使得創建複雜的網頁應用變得更加簡單。 H5的核心功能包括:1)元素允許在網頁上繪製圖形和動畫;2)語義化標籤如、等,使網頁結構清晰,利於SEO優化;3)新API如GeolocationAPI,支持基於位置的服務;4)跨瀏覽器兼容性需要通過兼容性測試和Polyfill庫來確保。

h5鏈接怎麼做h5鏈接怎麼做Apr 06, 2025 pm 12:39 PM

如何創建 H5 鏈接?確定鏈接目標:獲取 H5 頁面或應用程序的 URL。創建 HTML 錨點:使用 <a> 標記創建錨點並指定鏈接目標URL。設置鏈接屬性(可選):根據需要設置 target、title 和 onclick 屬性。添加到網頁:將 HTML 錨點代碼添加到希望鏈接出現的網頁中。

h5兼容問題怎麼解決h5兼容問題怎麼解決Apr 06, 2025 pm 12:36 PM

解決 H5 兼容問題的方法包括:使用響應式設計,允許網頁根據屏幕尺寸調整佈局。採用跨瀏覽器測試工具,在發布前測試兼容性。使用 Polyfill,為舊瀏覽器提供對新 API 的支持。遵循 Web 標準,使用有效的代碼和最佳實踐。使用 CSS 預處理器,簡化 CSS 代碼並提高可讀性。優化圖像,減小網頁大小並加快加載速度。啟用 HTTPS,確保網站的安全性。

h5怎么生成鏈接h5怎么生成鏈接Apr 06, 2025 pm 12:33 PM

h5頁面可以通過兩種方法生成鏈接:手動創建鏈接或使用短鏈接服務。通過手動創建,只需複制h5頁面的URL即可;通過短鏈接服務,需將URL粘貼到服務中,然後獲取縮短的URL。

h5分享頁面怎麼做h5分享頁面怎麼做Apr 06, 2025 pm 12:30 PM

製作引人入勝的 H5 分享頁面至關重要,旨在提升參與度、產生潛在客戶和增加品牌知名度。步驟包括:確定目標受眾、設計引人注目的視覺效果、創建引人入勝的內容、添加互動元素、優化社交媒體分享,以及測試並改進。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中