Defina vários atributos em um elemento usando JavaScript

Atributos definem recursos ou propriedades adicionais de um elemento html, como cor, largura, altura e assim por diante. Para fornecer um atributo ao elemento, pares de nomes-valor, como “nome = valor”, São usados ​​onde o valor do atributo deve ser incluído em aspas. Portanto, para definir o valor de um atributo no elemento especificado, use o “Elemento.setAttribute ()”Método.

Esta postagem ilustrará o procedimento para definir os múltiplos 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 teclas do objeto como uma matriz com o “Objeto.chaves()”Método, então, defina todos os atributos no elemento HTML especificado com o“setAttribute ()”Método.

Sintaxe

A sintaxe dada é usada para o método setAttribute ():

elemento.setattribute (attName, attValue);

A sintaxe acima contém dois parâmetros: “nome" e "valor”.

• ““attName”É o nome do novo atributo.
• ““attValue”É o valor do novo atributo.
• Este método criará um novo atributo e atribuirá um valor. Se o atributo especificado já existir, seu valor será atualizado.

Use a sintaxe dada para o objeto.Método Keys ():

Objeto.chaves (objeto)

Ele retorna uma variedade de um determinado objeto.

Exemplo 1: Defina vários atributos em um elemento usando o método foreach () com setattribute ()

Primeiro, crie um elemento no arquivo HTML:

Linuxhint

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 de estilo, o nome do elemento e a propriedade desativada para o elemento do botão:

const elementattributes =
Estilo: 'Background-Color: RGB (153, 28, 49); cor branca;',
Nome: 'LinuxButton',
desabilitado: ",
;

Agora, defina uma função chamada “setMultiLeattribUtesOlement"Onde primeiro chama o"Objeto.chaves()”Método para obter a matriz das chaves do objeto e depois utilizar o“para cada()”Método para iterar através da matriz e finalmente chamar o“setAttribute ()”Método para definir todos os atributos definidos no elemento HTML especificado.

Função setMultiLeattribUtesOlement (Elem, Elemattributes)
Objeto.chaves (ElementAttributes).foreach (atributo =>
Elem.setattribute (atributo, elemattributes [attribute]);
);

Pegue o botão usando seu ID atribuído com a ajuda do “getElementById ()”Método:

const Button = documento.getElementById ('botão');

Invoque a função definida “setMultiLeattribUtesOlement”E passe o elemento como o primeiro argumento e o objeto de atributos como o segundo argumento:

setMultiLeattribUtesOlement (botão, elementAttributes);

A saída mostra que os múltiplos atributos de um botão são 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: Defina vários atributos em um elemento usando o loop with SetAttribute () Método

Defina uma função com dois parâmetros em um arquivo JavaScript e use um loop para definir vários atributos dentro dele chamando o “setAttribute ()”Método:

Função setMultiLeattribUtesOlement (Elem, Elemattributes)
para (deixe eu em elemattributes)
Elem.setAttribute (i, elemattributes [i]);

Recupere o botão usando seu ID atribuído:

const Button = documento.getElementById ('botão');

Chame a função definida passando o elemento do botão e vários atributos na forma de pares de nomes-valor:

setMultiLeattribUtesOlement (botão, "style": "Background-Color: RGB (153, 28, 49); cor: branco;", "desativado": "", "nome": "linuxbutton");

Saída

Compilamos todas as informações essenciais relacionadas à definição dos múltiplos atributos em um elemento HTML usando JavaScript.

Conclusão

O JavaScript predefinido setAttribute ()”O método é usado para definir atributos únicos ou múltiplos para um elemento. Para definir os múltiplos atributos em um elemento, primeiro, crie um objeto que contém atributos na forma de valores de nomes. Obtenha as chaves dos objetos em uma matriz usando o “Objeto.chaves()”Método, então defina todos os atributos nos elementos especificados com o“setAttribute ()”Método. Neste post, ilustramos o procedimento para definir vários atributos em um elemento HTML usando JavaScript.