setAttribute (основной метод W3C DOM)

 element.setAttribute('rel', 'me'); 

  <a href="http://www.brothercake.com/"> brothercake </a> 

  <a href="http://www.brothercake.com/" rel="me"> Brothercake </a> 

Описание

Установите новый атрибут с указанным именем и значением для этого элемента.

Если атрибут с указанным именем уже существует, его value заменяется.

При установке значения оно не анализируется, поэтому любые ссылки на сущности или другие разметки будут обрабатываться как текст. Чтобы создать атрибут, содержащий сущности, спецификация предлагает создать узел EntityReference с соответствующими узлами Text и EntityReference качестве дочерних, а затем добавить его к элементу с помощью setAttributeNode , однако на практике это редко работает (подробности см. В Attr ).

Этот метод предназначен для работы с атрибутами без пространств имен; чтобы добавить атрибут пространства имен, используйте метод setAttributeNS DOM 2.

Будьте осторожны с именами атрибутов в верблюжьей клетке

Вы должны быть осторожны при использовании имен в верблюде в коде, предназначенном для всех браузеров, поскольку в Opera в режиме XHTML установка атрибута с именем в верблюде может повлиять на соответствующее свойство DOM. Например, если вы установите для атрибута tabIndex любое значение, это приведет к сбросу свойства tabIndex на 0 (его значение по умолчанию), полному удалению исходного атрибута tabindex и созданию нового атрибута с именем tabIndex и указанное строковое значение.

Такое поведение, вероятно, связано с несогласованностью в том, как обрабатывается чувствительность к регистру в режиме XHTML. В других браузерах (Firefox и Safari) при этом будет создан новый атрибут tabIndex, при этом исходный атрибут tabindex и соответствующее ему свойство tabIndex останутся без изменений.

Это примечание относится только к этим браузерам в режиме XHTML — в режиме HTML2 аргумент name не учитывает регистр, поэтому tabIndex обрабатывается как tabindex.

Кроме того, IE в HTML не может установить атрибут type элемента input — попытка сделать это вызовет ошибку (эта команда не поддерживается). Он также не может установить атрибут стиля (это просто не имеет никакого эффекта) и не может установить атрибуты обработки событий как строки (это не имеет никакого эффекта, если только этот элемент уже не имеет атрибут обработки событий с тем же именем, в этом случае операция по установке нового удалит старый, и ничего не останется — хотя getAttribute впоследствии вернет заданное строковое значение, на самом деле в элементе не будет активного обработчика событий). Однако IE может установить атрибуты обработки событий, если в качестве аргумента значения передана функция, а не строка:

 element.setAttribute('onclick', function() { alert("this works!"); }); 

Наконец, если этот метод используется для установки атрибута src изображения, значение, которое впоследствии возвращается из getAttribute, будет полностью квалифицированным URI; это то же самое, что и его поведение при получении src, установленного в статическом HTML. Однако, при установке href ссылки, впоследствии будет возвращено значение литерала; это отличается от его поведения со статическим HTML, в котором значение возвращается как квалифицированный URI.

Как я знаю, работает ли это?

Определить, работает ли этот метод должным образом, особенно сложно, поскольку можно вообще установить атрибут любого имени, хотя это может и не быть ожидаемым атрибутом. Например, в Internet Explorer вы все еще можете установить атрибут с именем class и впоследствии получить его с помощью getAttribute (‘class’), но он не будет соответствовать свойству className — это будет совершенно отдельный атрибут, который не имеет визуального различия элемент.

Во всех браузерах атрибут, который оценивается как логическое значение (например, отключено), может быть установлен только на true — установка его в false не имеет никакого эффекта. Это правильное поведение и потому, что такие атрибуты должны иметь только одно возможное значение (то есть, disabled = «disabled») или не определены (поэтому их отрицание должно быть сделано с помощью removeAttribute). В Opera 9.5, Firefox и Safari значение атрибута впоследствии будет возвращаться как ложное, но элемент все равно будет отключен, в Opera 9.0 значение будет продолжать возвращаться как отключенное, а в Internet Explorer значение будет продолжать возвращаться как логическое значение true; это точные отражения состояния элемента, даже если они немного сбивают с толку! Однако, поскольку IE считает, что эти атрибуты имеют фактическое логическое значение, значение можно переключить (и элемент отключить и включить соответствующим образом), установив его как логическое значение, а не строку:

 element.setAttribute('disabled', false); 

Internet Explorer реализует второй аргумент для setAttribute, который является флагом чувствительности к регистру, который может принимать значение 0 (без учета регистра) или 1 (по умолчанию, с учетом регистра). Этот аргумент работает так, как ожидается в IE, и не влияет ни на какой другой браузер.