Element: método setAttribute()

name

Uma string especificando o nome do atributo cujo valor deve ser definido. O nome do atributo é automaticamente convertido para letras minúsculas quando setAttribute() é chamado em um elemento HTML em um documento HTML.

value

Uma string contendo o valor a ser atribuído ao atributo.Qualquer valor não-string especificado é convertido automaticamente em uma string.

Atributos booleanos são considerados true se estiverem presentes no elemento em tudo. Você deve definir value para a string vazia ("") ou o nome do atributo, sem espaços em branco à esquerda ou à direita. Veja o exemplo abaixo para uma demonstração prática.

Como o value especificado é convertido em uma string, especificando null não necessariamente faz o que você espera. Em vez de remover o atributo ou definindo seu valor como null, em vez disso, ele define o valor do atributo para a string "null". Se você deseja remover um atributo, chame removeAttribute().

None (undefined).

InvalidCharacterError DOMException

Lançado se o valor name não for um [nome XML](https://www.w3.org/TR/REC-xml/#dt-name válido); por exemplo, começa com um número, um hífen ou um ponto, ou contém caracteres diferentes de caracteres alfanuméricos, sublinhados, hifens ou pontos.

No exemplo a seguir, setAttribute() é usado para definir atributos em um <button>.

<button>Hello World</button>

button {
  height: 30px;
  width: 100px;
  margin: 1em;
}

const button = document.querySelector("button");

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

Isso demonstra duas coisas:

• A primeira chamada para setAttribute() acima mostra a alteração do valor do atributo name para "helloButton". Você pode ver isso usando o inspetor de páginas do seu navegador (Chrome, Edge, Firefox, Safari).
• Para definir o valor de um atributo booleano, como disabled, você pode especificar qualquer valor. Uma string vazia ou o nome do atributo são valores recomendados. Tudo o que importa é que se o atributo estiver presente, independentemente do seu valor real, o seu valor é considerado 'verdadeiro'. A ausência do atributo significa que seu valor é false. Ao definir o valor do atributo disabled para a string vazia (""), estamos definindo disabled como true, o que resulta na desativação do botão.

• Element.hasAttribute()
• Element.getAttribute()
• Element.removeAttribute()
• Element.toggleAttribute()