9

たとえば、html要素にカスタム属性を指定すると、次のようになります。

<input type="button" id="my_button" custom_attr="custom_attr_text" value="value_text" />

次に、次のように取得できます。

document.getElementById("my_button").getAttribute("custom_attr");

そしてそれは戻り"custom_attr_text"ますが、もしそうなら

document.getElementById("my_button").custom_attr;

その後、それが返されますundefined!

valueまた、組み込みの属性 (またはなど) を使用すると、上記の両方が正常に機能することにも気付きましたid! 誰かがなぜこれが起こっているのか説明してもらえますか?

4

1 に答える 1

19

特定の標準属性のみがプロパティに直接マップされます。これは、非標準 (カスタム) 属性に対して定義された動作ではありません。

カスタム属性を使用する前方互換性のある方法は、それらにプレフィックスを付けることdata-です。

<input ... data-custom_attr="custom_attr_text" ... />

その後、HTML5 準拠のブラウザーで次のように使用できるようになります。

element.dataset.custom_attr

ただし、従来のブラウザーでは、引き続き.getAttribute().

于 2013-02-21T19:54:08.340 に答える