Element.setAttribute

Establece el valor de un atributo en el elemento indicado. Si el atributo ya existe, el valor es actualizado, en caso contrario, el nuevo atributo es a√Īadido con el nombre y valor indicado.

Para obtener el valor actual de un atributo, se utiliza getAttribute(); para eliminar un atributo, se llama a removeAttribute().

Sintaxis

Element.setAttribute(name, value);

Par√°metros

name
Un DOMString indicando el nombre del atributo cuyo valor se va a cambiar. El nombre del atributo se convierte autom√°ticamente en min√ļsculas cuando setAttribute() se llama sobre un elemento HTML en un documento HTML.
value
Un DOMString que contenga el valor que asignar al atributo. Cualquier valor indicado que no sea una cadena de texto se convierte autom√°ticamente en una cadena de texto.

Los atributos booleanos se consideran true si al menos est√°n presentes en el elemento, independientemente de su value actual; como regla, se deber√≠a especificar una cadena de texto vac√≠a ("") en value (algunas personas utilizan el nombre del atributo; esto funciona pero no es un standard). Vea un ejemplo posterior para una demostraci√≥n pr√°ctica.

Dado que value se convierte en una cadena de texto, indicando null no necesariamente hace lo que se espera. En lugar de eliminar el atributo o establecer su valor para ser null, establece el valor del atributo a la cadena de texto "null". Si se desea eliminar un atributo, se debe llamar a removeAttribute().

Valor devuelto

undefined.

Excepciones

InvalidCharacterError
El atributo especificado name contiene uno o m√°s caracteres que no son v√°lidos en el nombre del atributo.

Ejemplo

En el siguiente ejemplo, setAttribute() se utiliza para establecer atributos en un <button>.

HTML

<button>Hola Mundo</button>

JavaScript

var b = document.querySelector("button");

b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");

Esto demuestra dos cosas:

  • La primera llamada a setAttribute() muestra c√≥mo se cambia el valor del atributo name a "helloButton". Puede ver esto utilizando el inspector de p√°gina de su navegador (Chrome, Edge, Firefox, Safari).
  • Para establecer el valor de un atributo booleano, como disabled, se puede especificar cualquier valor. Una cadena de texto vac√≠a o el nombre de un atributo son valores recomendados. Todo lo que importa es que si el atributo est√° presente, independientemente de su valor actual, su valor se considera como true. La ausencia del atributo significa que su valor es false. Estableciendo una cadena vac√≠a ("") como el valor del atributo disabled, se estar√≠a cambiando disabled a true, lo que provoca que el bot√≥n sea deshabilitado.

Métodos DOM que tratan con atributos de elementos:

Not namespace-aware, most commonly used methods Namespace-aware variants (DOM Level 2) DOM Level 1 methods for dealing with Attr nodes directly (seldom used) DOM Level 2 namespace-aware methods for dealing with Attr nodes directly (seldom used)
setAttribute (DOM 1) setAttributeNS setAttributeNode setAttributeNodeNS
getAttribute (DOM 1) getAttributeNS getAttributeNode getAttributeNodeNS
hasAttribute (DOM 2) hasAttributeNS - -
removeAttribute (DOM 1) removeAttributeNS removeAttributeNode -

Especificación

Compatibilidad con navegadores

Notas Gecko

Utilizando setAttribute() para modificar ciertos atributos, el m√°s notable es value en XUL, funciona de forma inconsistente, ya que el atributo especifica el valor determinado. Para acceder o modificar los valores actuales, se deben utilizar las propiedades. Por ejemplo, utilizar Element.value en lugar de Element.setAttribute().