Home » JavaScript Tutorial

How to remove CSS property using JavaScript?

JavaScript | removing CSS property: Here, we are going to learn how to remove CSS property using JavaScript?
Submitted by Siddhant Verma, on January 21, 2020

In this article, we'll see how we can remove a CSS property from a certain element using JavaScript? We can remove only those properties that we assign ourselves and the pre-default ones cannot be removed by this method.

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>

Output

remove CSS property using JavaScript (1)

We can call on a certain DOM selector's style property and use the remove property method to remove that particular CSS property. First, let's get a reference to all the DOM elements.

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

Now let's try to remove the background property from our heading,

heading.style.removeProperty("background");

Oops! That didn't quite work, did it? There's a simple explanation. We are loading our scripts when our whole page loads and the styles are written inside our stylesheet. Even if we remove a certain property using JavaScript, it wouldn't make any difference since that DOM element is also hooked to a stylesheet and we aren't removing any kind of CSS that we have written. Let's refactor our code a little bit now, let's clear out styles and apply those styles using JavaScript,

<style>
/* body{
    background: silver;
  }
  h2{
    background: wheat;
    padding: 10px;
  }
  .btn{
    background: tomato;
  }
  .text{
    font-weight: 500;
  } */

</style>

Output

remove CSS property using JavaScript (2)

As you can see now all our styles are removed. Let's add them back in our 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>

Output

remove CSS property using JavaScript (3)

And we have our styles back! Great. Now let's try removing them using our JavaScript,

heading.style.removeProperty("background");

Output

remove CSS property using JavaScript (4)

Our heading no longer has a wheat background! Great. Let's remove all the CSS properties inside a function and see if we get back the same unstyled page.

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

Output

remove CSS property using JavaScript (5)

Everything should remain the same as we have not yet called or invoked our function so let's do it now inside our console,

    removeProperties();

Output

remove CSS property using JavaScript (6)

Voila! We have successfully removed all our CSS properties using JavaScript! Can you check for yourself is this method works for inline styles?






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.





Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.