Esta postagem ilustrará o procedimento para definir os vários atributos em um elemento HTML usando JavaScript.
Como definir vários atributos em um elemento usando JavaScript?
Para definir vários atributos em um elemento simultaneamente, primeiro crie um objeto com os nomes e valores dos atributos. Obtenha uma lista das chaves do objeto como uma matriz com a propriedade “ Object.keys() ” método, em seguida, defina todos os atributos no elemento HTML especificado com o “ setAttribute() ” método.
Sintaxe
A sintaxe fornecida é usada para o método setAttribute():
elemento. setAttribute ( atrName, atrValue ) ;
A sintaxe acima contém dois parâmetros: “ nome ' e ' valor ”.
- “ atrName ” é o nome do novo atributo.
- “ atrValue ” é o valor do novo atributo.
- Este método criará um novo atributo e atribuirá um valor a ele. Se o atributo especificado já existir, seu valor será atualizado.
Use a sintaxe fornecida para o método Object.keys():
Objeto . chaves ( objeto )Ele retorna uma matriz de um determinado objeto.
Exemplo 1: definir vários atributos em um elemento usando o método forEach() com o método setAttribute()
Primeiro, crie um elemento no arquivo HTML:
< ID do botão = 'botão' > LINUXHINT botão >Atualmente, a página da Web ficará assim:
No código JavaScript, primeiro crie um objeto chamado “ elementAttributes ” e adicione os atributos com nomes e valores ao objeto. Aqui, adicionaremos o atributo style, o nome do elemento e a propriedade disable para o elemento botão:
const elementAttributes = {estilo : 'cor de fundo: rgb(153, 28, 49); cor branca;' ,
nome : 'Botão Linux' ,
Desativado : '' ,
} ;
Agora, defina uma função chamada “ setMultipleAttributesonElement ” onde primeiro chame o “ Object.keys() ” para obter a matriz das chaves do objeto e, em seguida, utilizar o método “ para cada() ” para iterar pela matriz e, finalmente, chamar o método “ setAttribute() ” para definir todos os atributos definidos no elemento HTML especificado.
função setMultipleAttributesonElement ( element, elementAttributes ) {Objeto . chaves ( elementAttributes ) . para cada ( atributo => {
elemento. setAttribute ( atributo, elemAttributes [ atributo ] ) ;
} ) ;
}
Busque o botão usando seu id atribuído com a ajuda do “ getElementById() ” método:
const botão = documento. getElementById ( 'botão' ) ;Invoque a função definida “ setMultipleAttributesonElement ” e passe o elemento como o primeiro argumento e o objeto de atributos como o segundo argumento:
setMultipleAttributesonElement ( botão, elementAttributes ) ;A saída mostra que os vários atributos de um botão foram adicionados com sucesso:
Você também pode definir vários atributos em um elemento sem criar um objeto separado para os atributos. Para fazer isso, siga o exemplo abaixo.
Exemplo 2: definir vários atributos em um elemento usando o loop for com o método setAttribute()
Defina uma função com dois parâmetros em um arquivo JavaScript e use um loop for para definir vários atributos dentro dele chamando o método “ setAttribute() ” método:
função setMultipleAttributesonElement ( element, elementAttributes ) {por ( deixe i em elemAttributes ) {
elemento. setAttribute ( i, elemAttributes [ eu ] ) ;
}
}
Recupere o botão usando seu ID atribuído:
const botão = documento. getElementById ( 'botão' ) ;Chame a função definida passando o elemento de botão e vários atributos na forma de pares nome-valor:
setMultipleAttributesonElement ( botão, { 'estilo' : 'cor de fundo: rgb(153, 28, 49); cor: branco;' , 'Desativado' : '' , 'nome' : 'Botão Linux' } ) ;Resultado
Compilamos todas as informações essenciais relacionadas à configuração de vários atributos em um elemento HTML usando JavaScript.
Conclusão
O JavaScript predefinido setAttribute() ” é usado para definir atributos únicos ou múltiplos para um elemento. Para definir os vários atributos em um elemento, primeiro crie um objeto que contenha atributos na forma de nomes-valores. Obtenha as chaves dos objetos em um array usando o comando “ Object.keys() ” método e, em seguida, defina todos os atributos nos elementos especificados com o “ setAttribute() ” método. Nesta postagem, ilustramos o procedimento para definir vários atributos em um elemento HTML usando JavaScript.