¿Cómo eliminar la propiedad CSS usando JavaScript?

JavaScript | la eliminación de la propiedad CSS : Aquí, vamos a aprender cómo quitar propiedad CSS usando JavaScript?

En este artículo, vamos a ver cómo podemos eliminar una propiedad CSS de un elemento determinado usando JavaScript? Podemos eliminar sólo aquellas propiedades que asignamos a nosotros mismos y los pre class no pueden eliminarse mediante este método.

HTML:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Removing CSS property</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<style>
body {
background: silver;
}
h2 {
background: wheat;
padding: 10px;
}
.btn {
background: tomato;
}
.text {
font-weight: 500;
}
</style>
<body>
<div class="container">
<h2>Let's remove some css!</h2>
<div class="container">
<button class="btn">Just a random button!</button>
<p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora quis asperiores dicta quos laborum laboriosam perferendis ab veniam odit saepe, obcaecati officiis iure iste voluptates at quod commodi cupiditate voluptas!</p>
</div>
</div>
</body>
<script>
</script>
</html>

salida

How to remove CSS property using JavaScript? - 4

Podemos llamar a las propiedades de estilo de un cierto selector de DOM y utilizar el método de propiedad de eliminación para eliminar esa propiedad CSS particular. En primer lugar, vamos a obtener una referencia a todos los elementos del DOM.

<script>
const heading = document.querySelector('h2');
const button = document.querySelector('.btn');
const para = document.querySelector('.text');
</script>

Ahora vamos a tratar de eliminar la propiedad de fondo de nuestro rubro,

heading.style.removeProperty("background");

Ups! Eso no funcionó, ¿verdad? Hay una explicación sencilla. Estamos cargando nuestros scripts cuando nuestras cargas de la página enteros y los estilos se escriben dentro de nuestra hoja de estilo. Incluso si quitamos un determinado establecimiento a través de JavaScript, que no hace ninguna diferencia, ya que el elemento DOM también se engancha a una hoja de estilo y no estamos eliminando cualquier tipo de CSS que hemos escrito. Vamos a refactorizar nuestro código un poco ahora, vamos a aclarar a cabo estilos y aplicar esos estilos utilizando JavaScript,

<style>

</style>

salida

How to remove CSS property using JavaScript? - 5

Como se puede ver ahora todos se quitan nuestros estilos. Vamos a añadir de nuevo en nuestra JavaScript,

<script>
const heading = document.querySelector('h2');
const button = document.querySelector('.btn');
const para = document.querySelector('.text');
heading.style.background = "wheat";
heading.style.padding = "10px";
document.querySelector('body').style.background = "silver";
button.style.background = "tomato";
para.style.fontWeight = "500";
</script>

salida

How to remove CSS property using JavaScript? - 6

Y tenemos nuestro estilo de vuelta! Excelente. Ahora vamos a tratar de sacarlos usando nuestro código JavaScript,

heading.style.removeProperty("background");

salida

How to remove CSS property using JavaScript? - 7

Nuestro título ya no tiene un fondo de trigo! Excelente. Vamos a quitar todas las propiedades del CSS dentro de una función y ver si volvemos la misma página sin estilo.

function removeProperties() {
document.querySelector('body').style.removeProperty("background");
heading.style.removeProperty("background");
heading.style.removeProperty("padding");
button.style.removeProperty("background");
para.style.removeProperty("fontWeight");
}

salida

How to remove CSS property using JavaScript? - 8

Todo debe seguir siendo el mismo que aún no hemos llamado o invocado nuestra función así que vamos a hacer ahora dentro de nuestra consola,

    removeProperties();

salida

How to remove CSS property using JavaScript? - 9

Voila! Nos éxito hemos eliminado todas las propiedades CSS con JavaScript ! ¿Se puede comprobar usted mismo se default este método funciona class estilos en línea?


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *