Método HTML DOM setAttribute()
❮ El Objeto ElementoEjemplo
Agregue el atributo de clase con el valor de "democlass" a un elemento <h1>:
document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");
Antes de establecer el atributo:
Hello World
Después de establecer el atributo:
Hello World
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El método setAttribute() agrega el atributo especificado a un elemento y le da el valor especificado.
Si el atributo especificado ya existe, solo se establece/cambia el valor.
Nota: aunque es posible agregar el atributo de estilo con un valor a un elemento con este método, se recomienda que use las propiedades del objeto Style en lugar de estilo en línea, porque esto no sobrescribirá otras propiedades de CSS que se pueden especificar en el atributo de estilo:
Malo:
element.setAttribute("style", "background-color: red;");
Bien:
element.style.backgroundColor = "red";
Sugerencia: utilice el método removeAttribute() para eliminar un atributo de un elemento.
Sugerencia: vea también el método setAttributeNode() .
Compatibilidad con navegador
Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método.
Method | |||||
---|---|---|---|---|---|
setAttribute() | Yes | 8.0 | Yes | Yes | Yes |
Sintaxis
element.setAttribute(attributename, attributevalue)
Valores paramétricos
Parameter | Type | Description |
---|---|---|
attributename | String | Required. The name of the attribute you want to add |
attributevalue | String | Required. The value of the attribute you want to add |
Detalles técnicos
Valor de retorno: | Sin valor de retorno |
---|---|
Versión DOM | Objeto de elemento de nivel básico 1 |
Más ejemplos
Ejemplo
Cambie un campo de entrada a un botón de entrada:
document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
Antes de establecer el atributo:
Después de establecer el atributo:
Ejemplo
Agregue un atributo href con un valor de "www.w3schools.com" a un elemento <a>:
document.getElementById("myAnchor").setAttribute("href", "https://www.w3schools.com");
Antes de establecer el atributo:
Después de establecer el atributo:
Ejemplo
Averigüe si un elemento <a> tiene un atributo de destino. Si es así, cambie el valor del atributo de destino a "_self":
// Get the <a> element with id="myAnchor"
var x = document.getElementById("myAnchor");
// If the <a> element has a target attribute, set the value to "_self"
if (x.hasAttribute("target")) {
x.setAttribute("target", "_self");
}
páginas relacionadas
Tutorial HTML: Atributos HTML
Referencia HTML DOM: Método getAttribute()
Referencia HTML DOM: Método hasAttribute()
Referencia HTML DOM: método removeAttribute()
❮ El Objeto Elemento