Eliminar estilos CSS solo para un elemento
-
Use la regla CSS
all: revertpara eliminar estilos CSS solo para un elemento -
Use el método
removeProperty()para eliminar estilos CSS solo para un elemento -
Use el método
all: unsetpara eliminar estilos CSS solo para un elemento - Conclusión
Puede eliminar estilos CSS solo para un elemento. Para ello, tenemos los siguientes tres métodos para restablecer o eliminar los estilos CSS de un elemento:
- Elimine los estilos CSS utilizando la regla CSS
all: revert. - Elimina los estilos CSS usando el método
removeProperty(). - Elimina los estilos CSS usando el método
all:unset.
Use la regla CSS all: revert para eliminar estilos CSS solo para un elemento
La regla CSS all: revert se utiliza para restablecer o eliminar todos los estilos CSS de un elemento. Esto puede ser adecuado si desea eliminar todos los estilos aplicados por una hoja de estilos de terceros o si desea restablecer sus estilos a sus valores predeterminados.
Para usar all: revert, agréguelo a su conjunto de reglas CSS así:
all: revert;
¡Eso es todo! Todos los estilos CSS se eliminarán de los elementos a los que se aplica esta regla.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Reset/Remove CSS Styles for Element</title>
<style>
section {
color: darkgreen;
}
p {
color: red;
}
section.with-revert {
color: revert;
}
</style>
</head>
<body>
<section>
<h3>This will be dark green</h3>
<p>Text in paragraph will be red.</p>
This will also be dark green.
</section>
<section class="with-revert">
<h3>This will be black</h3>
<p>Text in paragraph will be red.</p>
This will also be black.
</section>
</body>
</html>
Use el método removeProperty() para eliminar estilos CSS solo para un elemento
Otra forma es utilizar el método removeProperty() para eliminar una propiedad CSS específica del elemento o componente.
Este método elimina estilos en línea y estilos aplicados con una hoja de estilo. Para eliminar una propiedad CSS de un elemento, debe usar el nombre de la propiedad CSS, no JavaScript.
Por ejemplo, para eliminar la propiedad color, usaría el método removeProperty() así:
<!DOCTYPE html>
<html>
<head>
<style>
#ex1 {
color: red;
}
</style>
</head>
<body>
<h1>The removeProperty() Method</h1>
<p>Click the button to remove the color property.</p>
<button onclick="myFunction()">Try it</button>
<div id="ex1">Some text.</div>
<script>
function myFunction() {
var declaration = document.styleSheets[0].cssRules[0].style;
var removedvalue = declaration.removeProperty("color");
alert(removedvalue);
}
</script>
</body>
</html>
Use el método all: unset para eliminar estilos CSS solo para un elemento
Todas las propiedades es una forma abreviada de restablecer todas las propiedades a sus valores iniciales o heredados. Cuando se usa en un elemento, eliminará todos los estilos CSS aplicados a ese elemento, incluidos los estilos en línea.
Sin embargo, no eliminará ningún estilo CSS utilizado para los elementos secundarios del elemento.
<!DOCTYPE html>
<html>
<head>
<title>
How to reset/remove CSS styles for element ?
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.geeks {
all: unset;
}
div {
color: Green;
font-size: 44px;
}
</style>
</head>
<body>
<center>
<div id="myid">
Reset/Remove CSS
</div>
<br />
<button id="gfg">
Click me to Unset CSS
</button>
<script>
$("#gfg").click(function () {
$("#myid").addClass("geeks");
});
</script>
</center>
</body>
</html>
Conclusión
Hay tres formas de restablecer o eliminar estilos CSS solo para un elemento.
La primera forma utiliza la regla CSS todo: revertir, que eliminará todos los estilos excepto los predeterminados de HTML. El segundo usa removeProperty(), y el tercero usa el método all:unset que también restablecerá o eliminará estilos CSS solo para un elemento.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn