javascript - JavaScript を使用して属性値にアクセスするさまざまな方法

Question

document.getElementById('myId').style;

スタイル属性にアクセスする方法の 1 つです。 document.getElementById('myId').getAttribute('style');

属性値を取得するこれら 2 つの方法の違いは何ですか。また、どちらが望ましいですか?

Answer 1

style最初の例では、属性ではなくプロパティにアクセスしていstyleます。styleプロパティがオブジェクトの場合、プロパティの値は何でもかまいません。2 番目の例では、タグの style 属性にアクセスしています。属性の値は文字列のみです。

一部の属性の場合、それらの間にマッピングがあります。したがってstyle、HTML ノードに属性を設定すると、styleプロパティが更新され、スタイルが適用されます。ただし、これは常に正しいとは限りません。IE の一部のバージョン (少なくとも IE7 まで) でよく知られているバグは、ある種のマッピングが壊れているため、属性の設定がプロパティに反映されないことです。

したがって、HTML ノードに属性を設定する場合は、2 番目のノードを使用する必要があります。ただし、HTML ノードを表すオブジェクトのプロパティにアクセスする場合は、最初のノードを使用する必要があります。

の場合はstyle、最初の 1 つを強くお勧めします。

例で明確にするために（最新のブラウザで）：

document.body.style.border = "1px solid red";
console.log(document.body.style); // [object CSSStyleDeclaration]
console.log(document.body.getAttribute("style")); // "border: 1px solid red;"

Answer 2

getAttribute標準属性だけでなく、非標準属性の値も返します。

非標準の属性はプロパティに変換されないため、オブジェクト プロパティの表記法はそうではありません。

<a id="test" foo="bar"> ... </a>​

<script>

    console.log(document.getElementById('test').foo); // undefined

    console.log(document.getElementById('test').getAttribute('foo')); // "bar"

</script>

Answer 3

違いはありません。

document.getElementById('myId').style;

の省略形です

document.getElementById('myId').getAttribute('style');

getAttribute('attributeName') の唯一の用途は、attributeName が有効な JavaScript 変数名でない場合であるため、引用符で囲むことがアクセスする唯一の方法になります。

Answer 4

はい、違いはありません。詳細な例は次のリンクにあります: https://developer.mozilla.org/en/DOM/element.style#Example