Remova todos os estilos de um elemento usando JavaScript
No processo de atualização de uma página da web ou do site, pode haver um requisito para remover todo o estilo ou parte dele de um determinado elemento. Além disso, adicionando efeitos e mensagens de aviso/erro ao clique do mouse ou pairar. Nesses casos.
Este blog discutirá as abordagens para remover todos os estilos de um elemento em JavaScript.
Como remover/omitir todos os estilos de um elemento em javascript?
Para remover todos os estilos de um elemento em JavaScript, as seguintes abordagens podem ser utilizadas:
- ““removeattribute ()”Método.
- ““estilo" propriedade.
- ““jQuery" métodos.
Vamos seguir cada uma das abordagens uma a uma!
Abordagem 1: Remova todos os estilos de um elemento em JavaScript usando o método removeattribute ()
O "removeattribute ()”O método omite um atributo de um elemento. Este método pode ser aplicado para omitir todos os estilos incluídos de um elemento específico.
Sintaxe
elemento.removeattribute (nome)
Na sintaxe dada:
- ““nome”Refere -se ao nome do atributo.
Exemplo
Vamos ver o exemplo a seguir:
Este é o site Linuxhint
No trecho de código acima:
- Inclua o cabeçalho declarado com o especificado “eu ia" e a "estilo”Atributo.
- Na parte JavaScript do Código, acesse o cabeçalho incluído de seu “eu ia”Usando o“getElementById ()”Método.
- Na próxima etapa, aplique o “removeattribute ()”Método com o atributo“estilo”Como seu parâmetro.
- Isso resultará na remoção do estilo especificado do título.
Antes de remover o estilo
Depois de remover o estilo
Dos dois trechos de imagem acima, a diferença antes e depois da remoção do estilo pode ser observada.
Abordagem 2: Remova estilos específicos de um elemento em JavaScript usando a propriedade Style
O "estilo”Propriedade fornece o valor do atributo de estilo de um elemento. Esta propriedade pode ser implementada para remover uma propriedade específica contida no atributo de estilo.
Sintaxe
elemento.estilo.propriedade = valor
Na sintaxe acima:
- ““valor”Corresponde ao valor referente à propriedade especificada.
Exemplo
Vamos passar pelo exemplo a seguir:
JavaScript é uma linguagem de programação muito eficaz. É muito útil para projetar uma página da web ou o site. Também pode ser integrado ao HTML para implementar algumas funcionalidades adicionais também.
Execute as etapas a seguir, conforme fornecido nas linhas acima do código:
- Inclua um elemento de parágrafo com o especificado “eu ia" e a "estilo”Atributo consistindo nas propriedades declaradas.
- Além disso, crie um botão com um anexo “ONCLICKEvento invocando a função removestyle ().
- Na próxima etapa, acesse o parágrafo contido usando seu “eu ia" no "getElementById ()”Método.
- Por fim, atribua a propriedade “largura" como "nulo”.
- Isso removerá a propriedade de largura dentro do “estilo”Atributo do parágrafo no botão Clique.
Saída
Na saída acima, o “largura”Do parágrafo é removido no botão Clique.
Abordagem 3: Remova todos os estilos de um elemento em JavaScript usando jQuery
A abordagem do jQuery pode ser aplicada para buscar o elemento incluído diretamente e remover seu estilo no botão Clique.
Exemplo
O exemplo abaixo do rumo explica o conceito declarado.
Antes de remover o estilo
Nas linhas acima do código:
- Inclua o cabeçalho declarado. Além disso, adicione a imagem especificada com o “eu ia”E suas dimensões definidas no“estilo”Atributo.
- Depois disso, crie um botão com o especificado “eu ia”.
- Na parte jQuery do código, acesse o botão criado. Após o clique do botão, a função declarada será acionada.
- Na definição da função, acesse a imagem contida por seu “eu iaDiretamente.
- Além disso, aplique o “removeattr ()”Método com o atributo“estilo”Como seu parâmetro.
- Isso resultará em negligenciar as dimensões definidas da imagem, removendo assim o estilo do elemento no botão Clique.
Saída
Da saída acima, é evidente que as dimensões definidas da imagem dentro dos “estilo”Atributo não afeta o botão Clique.
Conclusão
O "removeattribute ()”Método, o“estilo”Propriedade, ou a“jQuery”A abordagem pode ser utilizada para remover todos os estilos de um elemento usando JavaScript. O método removeattribute () pode ser aplicado para remover todo o estilo do elemento acessado diretamente. A propriedade de estilo pode ser implementada para remover um estilo específico dentro do “estilo”Atributo de um elemento. A abordagem jQuery pode ser aplicada para alcançar a mesma funcionalidade. Este tutorial explica como remover/omitir todos os estilos de um elemento específico em javascript.