Различные способы доступа к значениям атрибутов с помощью javascript 

document.getElementById('myId').style;

- один из способов доступа к атрибуту style. Также мы можем сделать то же самое, используя  document.getElementById('myId').getAttribute('style');

В чем разница между этими двумя способами получения значений атрибутов... И какой из них предпочтительнее?

Ответы

Ответ 1

В первом примере вы не получаете доступ к атрибуту style, а к свойству style. Значение свойства может быть любым, в случае свойства style является объектом. Во втором примере вы получаете доступ к атрибуту style тега. Значение атрибута может быть только строкой.

В случае некоторых атрибутов существует сопоставление между ними. Поэтому, если вы устанавливаете атрибут style в HTML node, ваше свойство style обновляется и применяется ваш стиль. Однако это не всегда так: хорошо известная ошибка в некоторых версиях IE (по крайней мере до IE7) заключается в том, что такое отображение нарушено, поэтому установить атрибут не отражается в свойстве.

Итак, если вы хотите установить атрибут в HTML node, вы должны использовать второй. Но если вы хотите получить доступ к свойству вашего объекта, представляющего HTML node, вы должны использовать первый.

В случае style настоятельно рекомендуется использовать первый.

Чтобы пояснить пример (в современных браузерах):

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

Ответ 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>

Ответ 3

нет разницы.

document.getElementById('myId').style;

является сокращением для

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

единственное использование для getAttribute ('attributeName') было бы, если attributeName не является допустимым именем переменной javascript, поэтому инкапсуляция в кавычки будет единственным способом доступа к нему.