How to remove CSS properties using JavaScript?-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to remove CSS properties using JavaScript?

王林

Sep 10, 2023 pm 06:09 PM

如何使用 JavaScript 删除 CSS 属性？

Sometimes, we need to remove CSS properties from HTML elements after performing certain tasks. For example, the user has not paid the subscription fee for your app. Therefore, you will have the "Payment Due" message in "red" in the header section. After the user clears the payment, you can change the content of the header and remove the "color: red" attribute to set the initial color.

There are many use cases that require removing CSS properties from HTML elements. Here we will learn different ways to remove CSS properties.

Use removeProperty() method

The first method uses the removeProperty() method. It is used to remove any CSS attribute from an HTML element and takes the attribute name as parameter.

grammar

Users can use the removeProperty() method to remove CSS properties from HTML elements according to the following syntax.

ele.style.removeProperty("property-name");

In the above syntax, "ele" is an HTML element from which we need to remove the CSS attributes.

Example

In the example below, we have created a div element that contains different CSS properties such as "width", "height", "border" and "background color".

Every time the user clicks the button, we will execute the removeColor() function. In the removeColor() function, we access the div element using the class name. After that, we use the removeProeprty() method to remove the background color from the div element by passing "background-color" as parameter.

In the output, the user can click the button and observe that the background color will be removed.

<html>
<body>
    <h3 id="Using-the-i-removeProperty-method-i-to-remove-the-CSS-property-from-HTML-element"> Using the <i> removeProperty() method </i> to remove the CSS property from HTML element </h3>
    <div class = "ele" style = "width: 200px; height: 200px; background-color: red; border: 2px solid black;">
    </div>  <br>
    <button onclick = "removeColor()">
        Remove background color </button>
    <script>
        function removeColor() {
            var ele = document.querySelector(".ele");
            ele.style.removeProperty("background-color");
        }
    </script>
</html>

Use setProperty() method

The second way to remove CSS properties from HTML elements is to use the setProperty() method. The setProperty() method is used to set CSS properties of an HTML element, but when we set an empty string for any CSS property, we can remove the CSS property from the element.

grammar

Users can use the setProperty() method to remove CSS properties from HTML elements according to the following syntax.

ele.style.setProperty(css property, "");

In the above syntax, we pass the property name as the first parameter and the empty string as the second parameter.

Example

In the example below, we create a div element as in the first example containing some CSS properties. In the removeBorder() function, we access the div element using the class name and the setProperty() method to set the border's empty string.

In the output we can initially observe the green border and when we click on the button it removes the border.

<html>
<body>
    <h3 id="Using-the-i-setProperty-method-i-to-remove-the-CSS-property-from-HTML-element"> Using the <i> setProperty() method </i> to remove the CSS property from HTML element </h3>
    <div class = "ele" style = "width: 200px; height: 200px;background-color: blue; border: 10px solid green;">
    </div>    <br>
    <button onclick = "removeBorder()">
        Remove border </button>
    <script>
        function removeBorder() {
            var ele = document.querySelector(".ele");
            ele.style.setProperty("border", "");
        }
    </script>
</html>

Remove CSS properties by setting "null" value

Another way to remove CSS properties from HTML elements is to set a null value for a specific CSS property. We can also set null value for any specific CSS property using JavaScript’s setProperty() method and JQuery’s CSS() method. Here we will directly access the CSS property and set a null value for it.

grammar

Users can remove CSS properties from HTML elements by setting a null value for the CSS property by following the following syntax.

element.style.css_property = null;

In the above syntax, users need to replace "element" and "css_property" with specific HTML element and CSS property names respectively.

Example

In the example below, the div element contains some text and we set the font size to 3rem. In the removeSize() function, we access the "style" object of the div element and set the "fontSize" property of the style object to null.

In the output, the user can click a button to set the initial font size of the div element text.

<html>
<body>
    <h3 id="Setting-the-i-null-values-to-CSS-proeprties-i-to-remove-the-CSS-property-from-HTML-element"> Setting the <i> null values to CSS proeprties </i> to remove the CSS property from HTML element </h3>
    <div style = "font-size: 3rem;">
        Hello World! How are you?
    </div>
    </div> <br>
    <button onclick = "removeSize()">  Remove font-size </button>
    <script>
        function removeSize() {
            let div = document.querySelector('div');
            div.style.fontSize = null;
        }
    </script>
</html>

Use removeAttribute() method

The fourth way to remove CSS attributes from HTML elements is to use the removeAttribute() method. JavaScript's removeAttribute() method is used to remove a specific HTML attribute from JavaScript. In our case, we can remove the "style" attribute, which will remove all styles from the HTML element.

grammar

Users can use the removeAttribute() method to remove CSS attributes from HTML elements according to the following syntax.

ele.removeAttribute("style");

In the above syntax, we pass "style" as parameter of remvoeAttribute() method to remove all CSS attributes.

Example

In the example below, we create a "

" element that contains text and multiple CSS properties.

removeStyle() function removes the "style" attribute from the "

" element using the removeAttribute() method.



     Using the  removeAttribute() method  to remove the CSS property from HTML element 
    
        Welcome to the tutorials point,  CSS  tutorial.
    
   

    
    <script>
        function removeStyle() {
            var ele = document.getElementsByClassName("para")[0];
            ele.removeAttribute(&quot;style&quot;);
        }
    </script>

in conclusion

We learned four different ways to remove CSS properties from HTML elements. In the first method, we have used the removeProperty() method, which is one of the best ways to remove CSS properties. The second and third method are almost similar in setting null value for CSS properties, but it does not remove CSS properties from HTML elements.

In the last method, we used the removeAttribute() method to remove the "style" attribute, but it should be used only when we need to remove all styles from the HTML element.

All the above methods only work for removing inline CSS properties.

The above is the detailed content of How to remove CSS properties using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AM

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

Custom Google Search API Setup TutorialMar 04, 2025 am 01:06 AM

This tutorial shows you how to integrate a custom Google Search API into your blog or website, offering a more refined search experience than standard WordPress theme search functions. It's surprisingly easy! You'll be able to restrict searches to y

Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AM

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

Example Colors JSON FileMar 03, 2025 am 12:35 AM

This article series was rewritten in mid 2017 with up-to-date information and fresh examples. In this JSON example, we will look at how we can store simple values in a file using JSON format. Using the key-value pair notation, we can store any kind

10 jQuery Syntax HighlightersMar 02, 2025 am 12:32 AM

Enhance Your Code Presentation: 10 Syntax Highlighters for Developers Sharing code snippets on your website or blog is a common practice for developers. Choosing the right syntax highlighter can significantly improve readability and visual appeal. T

8 Stunning jQuery Page Layout PluginsMar 06, 2025 am 12:48 AM

Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation

10 JavaScript & jQuery MVC TutorialsMar 02, 2025 am 01:16 AM

This article presents a curated selection of over 10 tutorials on JavaScript and jQuery Model-View-Controller (MVC) frameworks, perfect for boosting your web development skills in the new year. These tutorials cover a range of topics, from foundatio

What is 'this' in JavaScript?Mar 04, 2025 am 01:15 AM

Core points This in JavaScript usually refers to an object that "owns" the method, but it depends on how the function is called. When there is no current object, this refers to the global object. In a web browser, it is represented by window. When calling a function, this maintains the global object; but when calling an object constructor or any of its methods, this refers to an instance of the object. You can change the context of this using methods such as call(), apply(), and bind(). These methods call the function using the given this value and parameters. JavaScript is an excellent programming language. A few years ago, this sentence was

See all articles