検索
ホームページウェブフロントエンド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 までご連絡ください。
H5:ツール、フレームワーク、およびベストプラクティスH5:ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産:現在のH5の理解HTML5の遺産:現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1)itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2)

H5コード:アクセシビリティとセマンティックHTMLH5コード:アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

H5はHTML5と同じですか?H5はHTML5と同じですか?Apr 08, 2025 am 12:16 AM

「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

H5の機能は何ですか?H5の機能は何ですか?Apr 07, 2025 am 12:10 AM

H5、またはHTML5は、HTMLの5番目のバージョンです。開発者により強力なツールセットを提供し、複雑なWebアプリケーションを簡単に作成できるようにします。 H5のコア関数には、次のものが含まれます。1)Webページにグラフィックとアニメーションを描画できる要素。 2)Webページ構造をSEOの最適化を明確かつ助長させるなどのセマンティックタグなど。 3)Geolocationapiなどの新しいAPIは、ロケーションベースのサービスをサポートします。 4)互換性テストとポリフィルライブラリを通じて、クロスブラウザーの互換性を確保する必要があります。

H5リンクの実行方法H5リンクの実行方法Apr 06, 2025 pm 12:39 PM

H5リンクを作成する方法は?リンクターゲットを決定します。H5ページまたはアプリケーションのURLを取得します。 HTMLアンカーの作成:&lt; a&gt;を使用しますアンカーを作成し、リンクターゲットURLを指定するタグ。リンクプロパティの設定(オプション):必要に応じて、ターゲット、タイトル、およびオンクリックプロパティを設定します。 Webページに追加:リンクを表示するWebページにHTMLアンカーコードを追加します。

H5互換性の問題を解決する方法H5互換性の問題を解決する方法Apr 06, 2025 pm 12:36 PM

H5互換性の問題のソリューションには、次のものが含まれます。Webページが画面サイズに応じてレイアウトを調整できるレスポンシブデザインを使用します。クロスブラウザーテストツールを使用して、リリース前に互換性をテストします。 PolyFillを使用して、古いブラウザの新しいAPIのサポートを提供します。 Web標準に従って、効果的なコードとベストプラクティスを使用します。 CSSプリプロセッサを使用して、CSSコードを簡素化し、可読性を向上させます。画像を最適化し、Webページのサイズを削減し、ロードをスピードアップします。 HTTPSがWebサイトのセキュリティを確保できるようにします。

H5でリンクを生成する方法H5でリンクを生成する方法Apr 06, 2025 pm 12:33 PM

H5ページは、リンクを手動で作成するか、短いリンクサービスを使用するという2つの方法でリンクを生成できます。手動で作成することにより、H5ページのURLをコピーするだけです。短いリンクサービスを通じて、URLをサービスに貼り付けてから短縮URLを取得する必要があります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません