пользовательский атрибут работает только с element.getAttribute («атрибут»), но не «element.attribute»

Question

Я просто заметил, что если я дам пользовательский атрибут 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) оба вышеописанного прекрасно работают! Не могли бы вы объяснить, почему это происходит?

Answer 1

Только определенные стандартные атрибуты непосредственно отображаются в свойствах. Это не определенное поведение для нестандартных (настраиваемых) атрибутов.

Передовой способ использования пользовательских атрибутов - это префикс их data-.

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

Тогда они станут доступны в HTML5 совместимых браузеров, как:

element.dataset.custom_attr 

Но в старых браузерах, вы все равно должны использовать .getAttribute().