Método attr

O método attr permite obter e alterar qualquer atributo de um elemento.

É importante não confundir propriedades e atributos dos elementos. Ao criar a árvore DOM, os atributos são convertidos nas propriedades DOM correspondentes dos elementos. Seus nomes nem sempre coincidem, assim como seus valores. Algumas propriedades também podem não ter atributos correspondentes; elas podem ser obtidas e definidas apenas usando o método prop, por exemplo, a propriedade tagName.

Sintaxe

Obtendo o valor de um atributo:

javascript$(seletor).attr(nome do atributo);

Alterando o valor de um atributo:

javascript$(seletor).attr(nome do atributo, novo valor);

Alterando os valores de vários atributos:

javascript$(seletor).attr({primeiro_atributo: novo_valor, segundo_atributo: novo_valor, ...});

Aplicando uma função a cada elemento no conjunto:

javascript$(seletor).attr(nome do atributo, function(índice no conjunto, valor atual do atributo));

Exemplo

No exemplo a seguir, obteremos um input pelo seu id e exibiremos o valor do seu atributo value:

html<input type="text" value="!!!" id="test">

javascriptlet value = $('#test').attr('value');
console.log(value);

Exemplo

E agora vamos gravar um novo valor 'www' no mesmo atributo:

html<input type="text" value="!!!" id="test">

javascript$('#test').attr('value', 'www');

O código HTML ficará assim:

html<input type="text" value="www" id="test">

Exemplo

Vamos alterar simultaneamente os atributos type e value:

html<input type="text" value="!!!" id="test">

javascript$('#test').attr({value: 'www', type: 'password'});

O código HTML ficará assim:

html<input type="password" value="www" id="test">

Exemplo

Vamos alterar o atributo value de cada input - adicionando ao value atual o índice do elemento no conjunto:

html<input type="text" value="aaa">
<input type="text" value="bbb">
<input type="text" value="ccc">

javascript$('input').attr('value', function(index, value) {
  return value + ' ' + index;
});

O código HTML ficará assim:

html<input type="text" value="aaa 0">
<input type="text" value="bbb 1">
<input type="text" value="ccc 2">

Veja também