Eliminar todos los estilos de un elemento usando JavaScript
En el proceso de actualización de una página web o el sitio, puede haber un requisito para eliminar todo el estilo o una parte de un elemento particular. Además de eso, agregar efectos y mensajes de advertencia/error al hacer clic o pasar el ratón. En tales casos, eliminar todos los estilos de un elemento que usa JavaScript se pregunta al llamar la atención del usuario y hacer que el sitio web se destaque.
Este blog discutirá los enfoques para eliminar todos los estilos de un elemento en JavaScript.
Cómo eliminar/omitir todos los estilos de un elemento en JavaScript?
Para eliminar todos los estilos de un elemento en JavaScript, se pueden utilizar los siguientes enfoques:
- "removeattribute ()" método.
- "estilo" propiedad.
- "jQuery" métodos.
Sigamos cada uno de los enfoques uno por uno!
Enfoque 1: Elimine todos los estilos de un elemento en JavaScript utilizando el método RemoveAttribute ()
El "removeattribute ()El método omite un atributo de un elemento. Este método se puede aplicar para omitir todos los estilos incluidos de un elemento específico.
Sintaxis
elemento.RemoveAttribute (nombre)
En la sintaxis dada:
- "nombre"Se refiere al nombre del atributo.
Ejemplo
Vamos a ver el siguiente ejemplo:
Este es el sitio web de Linuxhint
En el fragmento de código anterior:
- Incluir el encabezado declarado que tiene el especificado "identificación" y el "estilo" atributo.
- En la parte de JavaScript del código, acceda al encabezado incluido desde su "identificación" utilizando el "getElementById ()" método.
- En el siguiente paso, aplique el "removeattribute ()"Método que tiene el atributo"estilo"Como su parámetro.
- Esto dará como resultado eliminar el estilo especificado del encabezado.
Antes de eliminar el estilo
Después de eliminar el estilo
Desde los dos fragmentos de imagen de arriba, se puede observar la diferencia antes y después de la eliminación del estilo.
Enfoque 2: Eliminar estilos específicos de un elemento en JavaScript utilizando la propiedad de estilo
El "estilo"La propiedad da el valor del atributo de estilo de un elemento. Esta propiedad se puede implementar para eliminar una propiedad en particular contenida en el atributo de estilo.
Sintaxis
elemento.estilo.propiedad = valor
En la sintaxis anterior:
- "valor"Corresponde al valor que se refiere a la propiedad especificada.
Ejemplo
Pasemos por el siguiente ejemplo:
JavaScript es un lenguaje de programación muy efectivo. Es muy útil para diseñar una página web o el sitio. También se puede integrar con HTML para implementar algunas funcionalidades adicionales también.
Realice los siguientes pasos como se dan en las líneas de código anteriores:
- Incluir un elemento de párrafo que tenga el especificado "identificación" y el "estilo"Atributo que consiste en las propiedades establecidas.
- Además, cree un botón con un adjunto "al hacer clic"Evento invocando la función RemoVeStyle ().
- En el siguiente paso, acceda al párrafo contenido usando su "identificación" en el "getElementById ()" método.
- Por último, asigne la propiedad "ancho" como "nulo".
- Esto eliminará la propiedad de ancho dentro del "estilo"Atributo del párrafo sobre el clic del botón.
Producción
En la salida anterior, el "ancho"Del párrafo se elimina en el botón Haga clic.
Enfoque 3: Elimine todos los estilos de un elemento en JavaScript usando jQuery
El enfoque jQuery se puede aplicar para obtener el elemento incluido directamente y eliminar su estilo sobre el botón Haga clic.
Ejemplo
El ejemplo a continuación explica el concepto declarado.
Antes de eliminar el estilo
En las líneas de código anteriores:
- Incluir el encabezado declarado. Además, agregue la imagen especificada que tiene el "identificación"Y sus dimensiones establecidas en el"estilo" atributo.
- Después de eso, cree un botón con el especificado "identificación".
- En la parte jQuery del código, acceda al botón creado. Al hacer clic en el botón, se activará la función establecida.
- En la definición de la función, acceda a la imagen contenida por su "identificación"Directamente.
- Además, aplique el "RemoveatTR ()"Método que tiene el atributo"estilo"Como su parámetro.
- Esto dará como resultado descuidar las dimensiones establecidas de la imagen, eliminando así el estilo del elemento sobre el clic del botón.
Producción
De la salida anterior, es evidente que la imagen establece las dimensiones dentro del "estilo"El atributo no afecta el clic del botón.
Conclusión
El "removeattribute ()"Método, el"estilo"Propiedad, o la"jQueryEl enfoque se puede utilizar para eliminar todos los estilos de un elemento usando JavaScript. El método RemoveAttribute () se puede aplicar para eliminar todo el estilo del elemento accedido directamente. La propiedad de estilo se puede implementar para eliminar un estilo particular dentro del "estilo"Atributo de un elemento. El enfoque jQuery se puede aplicar para lograr la misma funcionalidad. Este tutorial explica cómo eliminar/omitir todos los estilos de un elemento específico en JavaScript.