Esta tradução está incompleta. Ajude atraduzir este artigo.
Adiciona um novo atributo ou modifica o valor de um atributo existente num elemento específico.
Sintaxe
element.setAttribute(name, value);
name
é o nome do atributo como string.value
é o novo valor desejado do atributo
Exemplo
No seguinte exemplo, setAttribute()
é usado para definir o atributo disabled
no <button>
, tornando-o desabilitado.
<button>Hello World</button>
var b = document.querySelector("button"); b.setAttribute("disabled", "disabled");
Notas
Quando chamado em um elemento HTML em um documento HTML, setAttribute
lower-cases its attribute name argument.
Se um atributo especificado já existe, então o valor do atributo é mudado para o valor passado para a função. Se não existe. então o atributo é criado.
Apesar de getAttribute()
retornar null
para atributos ausentes, você precisa usar removeAttribute()
ao invés de elt.setAttribute(attr, null)
para remover o atributo. Este último forçará o valor null
para a string "null"
, o que não é, provavelmente, o que você quer.
Usar setAttribute()
para modificar certos atributos, mais notavelmente valor em XUL, funciona inconsistentemente, como atributos específicos de valor padrão. Para acessar ou modificar os valores atuais, você deve usar as propriedades. Por exemplo, use elt.value
ao invés de elt.setAttribute('value', val)
.
Para definir um atributo que não leva valor, assim como o atributo autoplay
de um elemento <audio>
, use null
ou um valor vazio. Por exemplo: elt.setAttribute('autoplay', '')
DOM methods dealing with element's attributes:
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 |
- |
Especificação
- DOM Level 2 Core: setAttribute (introduzido em DOM Level 1 Core)
- HTML5: APIs in HTML documents