thuộc tính tùy chỉnh chỉ làm việc với element.getAttribute ("thuộc tính") nhưng không phải là "element.attribute"

Question

Tôi vừa nhận thấy, rằng nếu tôi cung cấp cho một thuộc tính tùy chỉnh cho một yếu tố html, ví dụ:

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

sau đó tôi có thể lấy nó như thế này:

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

và nó sẽ trở lại "custom_attr_text", nhưng nếu tôi làm

document.getElementById("my_button").custom_attr; 

sau đó nó trả về undefined!

Tôi cũng nhận thấy rằng với thuộc tính tích hợp (ví dụ: value hoặc id) cả hai hoạt động trên đều tốt! Ai đó có thể giải thích tại sao điều này xảy ra?

Answer 1

Chỉ một số thuộc tính tiêu chuẩn nhất định được ánh xạ trực tiếp tới thuộc tính. Đây không phải là hành vi được xác định cho các thuộc tính phi tiêu chuẩn (tùy chỉnh).

Cách tương thích về phía trước của việc sử dụng thuộc tính tùy chỉnh là đặt tiền tố cho chúng bằng data-.

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

Sau đó, họ trở nên có sẵn trong HTML5 trình duyệt tương thích như:

element.dataset.custom_attr 

Nhưng trong trình duyệt cũ, bạn vẫn sẽ cần phải sử dụng .getAttribute().