Método setAttribute() del Elemento DOM HTML

Definición y Uso

setAttribute() El método agrega el atributo especificado y le asigna un valor especificado.

Si el atributo especificado ya existe, solo se establece / cambia el valor.

Nota:El objeto HTMLElement del documento HTML define propiedades JavaScript correspondientes a todas las propiedades HTML estándar. Por lo tanto, solo necesita usar este método cuando necesite establecer propiedades no estándar.

Vea también:

Manual de Referencia:

Método getAttribute()

Método removeAttribute()

Método hasAttribute()

Método hasAttributes()

Método getAttributeNode()

Método setAttributeNode()

Método removeAttributeNode()

Tutoriales:

Atributos HTML

Ejemplo

Ejemplo 1

Agregar atributo de clase al elemento:

element.setAttribute("class", "democlass");

Antes de agregar:

Objeto Element

Después de agregar:

Objeto Element

Prueba por ti mismo

Ejemplo 2

Cambiar el campo de entrada a un botón:

myInput.setAttribute("type", "button");

Prueba por ti mismo

Antes de cambiar:

Después de cambiar:

Ejemplo 3

Agregar el atributo href al elemento <a>:

myAnchor.setAttribute("href", "");

Prueba por ti mismo

Antes de agregar:

Visita codew3c.com

Después de agregar:

Visita codew3c.com

Ejemplo 4

Cambiar el valor del atributo target a "_self":

if (element.hasAttribute("target")) {      
  element.setAttribute("target", "_self");
}

Prueba por ti mismo

Sintaxis

element.setAttribute(name, value)

Parámetros

Parámetros Descripción
name Requerido. Nombre del atributo.
value Requerido. Nuevo valor del atributo.

Valor de retorno

Ninguno.

Lanzar

Excepción Descripción
INVALID_CHARACTER_ERR Parámetros name Caracteres no permitidos en los nombres de atributos HTML o XML.
NO_MODIFICATION_ALLOWED_ERR El elemento actual es de solo lectura, no se permite modificar sus propiedades.

Notas

Puede agregar una propiedad de estilo con valor al elemento, pero no se recomienda hacerlo, ya que esto cubrirá otras propiedades del atributo estilo.

Por favor, utilice las propiedades del objeto Style:

Desventajas:

element.setAttribute("style", "background-color:red;");

Ventajas:

element.style.backgroundColor = "red";

Compatibilidad del navegador

element.setAttribute() Es una característica de DOM Level 1 (1998).

Todos los navegadores lo soportan completamente:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte