Những cách khác nhau của việc tiếp cận các giá trị thuộc tính sử dụng javascript

Question

document.getElementById('myId').style; 

là một cách để truy cập vào thuộc tính style .. Ngoài ra chúng tôi có thể làm điều tương tự sử dụng document.getElementById('myId').getAttribute('style');

sự khác biệt giữa hai cách nhận giá trị thuộc tính là gì ..Và cái nào là thích hợp hơn?

Answer 1

Trong ví dụ đầu tiên bạn không truy cập thuộc tính style, nhưng đến thuộc tính style. Giá trị của tài sản có thể là bất cứ điều gì, trong trường hợp tài sản style là một đối tượng. Trong ví dụ thứ hai bạn đang truy cập vào thuộc tính style của thẻ. Giá trị của thuộc tính chỉ có thể là chuỗi.

Trong trường hợp một số thuộc tính có một ánh xạ giữa chúng. Vì vậy, nếu bạn đặt thuộc tính style trên nút HTML, thuộc tính style của bạn được cập nhật và kiểu của bạn được áp dụng. Tuy nhiên, điều này không phải lúc nào cũng đúng: một lỗi nổi tiếng trong một số phiên bản của IE (ít nhất là cho đến IE7) là loại ánh xạ bị hỏng, do đó, thiết lập một thuộc tính không được phản ánh đến thuộc tính.

Vì vậy, nếu bạn muốn đặt thuộc tính trên nút HTML, bạn phải sử dụng thuộc tính thứ hai. Nhưng nếu bạn muốn truy cập vào thuộc tính của đối tượng mà đại diện cho nút HTML, bạn phải sử dụng nút đầu tiên.

Trong trường hợp của style, tùy chọn đầu tiên được khuyến nghị.

Để làm cho nó rõ ràng với một ví dụ (trong các trình duyệt hiện đại):

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

không có sự khác biệt.

document.getElementById('myId').style; 

là viết tắt của

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

việc sử dụng chỉ cho getAttribute ('AttributeName') sẽ được nếu AttributeName không phải là một tên biến javascript hợp lệ, vì vậy đóng gói nó trong dấu ngoặc kép sẽ là con đường duy nhất để truy cập nó.

Answer 3

getAttribute sẽ trả về giá trị của các thuộc tính phi tiêu chuẩn cũng như những tiêu chuẩn.

Ký hiệu thuộc tính đối tượng sẽ không, vì thuộc tính không chuẩn không được chuyển đổi thành thuộc tính.

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

<script> 

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

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

</script> 

Answer 4

Có không có sự khác biệt và ví dụ chi tiết có thể được tìm thấy trên đường dẫn sau: https://developer.mozilla.org/en/DOM/element.style#Example