Método HTML DOM setAttribute()
❮ O Objeto ElementoExemplo
Adicione o atributo class com o valor de "democlass" a um elemento <h1>:
document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");
Antes de definir o atributo:
Hello World
Depois de definir o atributo:
Hello World
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
O método setAttribute() adiciona o atributo especificado a um elemento e fornece a ele o valor especificado.
Se o atributo especificado já existir, apenas o valor será definido/alterado.
Nota: Embora seja possível adicionar o atributo style com um valor a um elemento com este método, é recomendado que você use as propriedades do objeto Style ao invés para o estilo inline, pois isso não substituirá outras propriedades CSS que podem ser especificadas em o atributo de estilo:
Ruim:
element.setAttribute("style", "background-color: red;");
Boa:
element.style.backgroundColor = "red";
Dica: Use o método removeAttribute() para remover um atributo de um elemento.
Dica: Consulte também o método setAttributeNode() .
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao método.
Method | |||||
---|---|---|---|---|---|
setAttribute() | Yes | 8.0 | Yes | Yes | Yes |
Sintaxe
element.setAttribute(attributename, attributevalue)
Valores de parâmetro
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 |
Detalhes técnicos
Valor de retorno: | Sem valor de retorno |
---|---|
Versão DOM | Objeto de elemento de nível 1 principal |
Mais exemplos
Exemplo
Altere um campo de entrada para um botão de entrada:
document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
Antes de definir o atributo:
Depois de definir o atributo:
Exemplo
Adicione um atributo href com um valor de "www.w3schools.com" a um elemento <a>:
document.getElementById("myAnchor").setAttribute("href", "https://www.w3schools.com");
Antes de definir o atributo:
Depois de definir o atributo:
Exemplo
Descubra se um elemento <a> tem um atributo target. Em caso afirmativo, altere o valor do atributo target para "_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
Referência HTML DOM: método getAttribute()
Referência HTML DOM: método hasAttribute()
Referência HTML DOM: método removeAttribute()
❮ O Objeto Elemento