JavaScript – Clear Inline Style of HTML Element

To clear Inline Style of a HTML Element using JavaScript, get reference to the HTML Element element, and assign empty string value to the element.style property.

Note: This solution clears only the inline style. Any global styles using style sheets shall be applied to the element.

In the following example, we will clear the inline style of HTML Element with id "myElement", in JavaScript, using element.style property.

example.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head> 
<body>
    <h2>Clear Inline Style of HTML Element in JavaScript</h2>
    <div id="myElement" style="border:1px solid #CCC;width:100px;height:100px;">Hello World!</div>
    <br>
    <button type="button" onclick="changeStyle()">Click Me</button>
    <script>
    function changeStyle(){
        var element = document.getElementById("myElement");
        element.style = "";
    }
    </script>
</body>
</html>

Conclusion

In this JavaScript Tutorial, we learned how to clear inline style of a HTML Element using JavaScript.