This post will discuss how to remove inline CSS properties from an element using JavaScript and jQuery.
The CSS property may have been directly applied using the HTML style attribute or using jQuery’s .css() method or direct DOM manipulation of the style property. Note, the solution does not remove the styles applied with a CSS class or with HTML <style> element.
1. Using jQuery
The standard method to set a CSS attribute is with the .css() method, which modifies the element’s style property. If you set the value of a style property to an empty string, it removes the property from that element. However, this leaves an empty style property on DOM.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $("button").click(function() { $("#container").css("border", ""); }); }); |
CSS
|
1 2 3 4 5 6 7 8 |
.div-attributes { width: 500px; height: 300px; } button { margin: 10px; } |
HTML
|
1 2 3 |
<div id="container" style="border: 1px solid black; background-color: lightgray;" class="div-attributes"></div> <button>Remove Border</button> |
Alternatively, you can get the style attribute using jQuery’s .prop() or .attr() method and then use the removeProperty() method to remove a property from it.
JS
|
1 2 3 4 5 6 |
$(document).ready(function() { $("button").click(function() { var divStyle = $("#container").prop("style"); divStyle.removeProperty("border"); }); }); |
CSS
|
1 2 3 4 5 6 7 8 |
.div-attributes { width: 500px; height: 300px; } button { margin: 10px; } |
HTML
|
1 2 3 |
<div id="container" style="border: 1px solid black; background-color: lightgray;" class="div-attributes"></div> <button>Remove Border</button> |
In case you want to remove the complete styling of the element, you can use jQuery’s .removeAttr() method, as shown below:
JS
|
1 2 3 4 5 |
$(document).ready(function() { $("button").click(function() { $("#container").removeAttr("style"); }); }); |
CSS
|
1 2 3 4 5 6 7 8 |
.div-attributes { width: 500px; height: 300px; } button { margin: 10px; } |
HTML
|
1 2 3 |
<div id="container" style="border: 1px solid black; background-color: lightgray;" class="div-attributes"></div> <button>Remove `style` attribute</button> |
2. Using JavaScript
In pure JavaScript, you can use the removeProperty() method for removing a property from the style attribute of the element.
JS
|
1 2 3 4 |
document.querySelector("button").onclick = function() { var obj = document.getElementById("container"); obj.style.removeProperty("border"); } |
CSS
|
1 2 3 4 5 6 7 8 |
.div-attributes { width: 500px; height: 300px; } button { margin: 10px; } |
HTML
|
1 2 3 |
<div id="container" style="border: 1px solid black; background-color: lightgray;" class="div-attributes"></div> <button>Remove Border</button> |
Alternatively, you can set the corresponding CSS property to an empty string, which removes it from the element.
JS
|
1 2 3 4 |
document.querySelector("button").onclick = function() { var obj = document.getElementById("container"); obj.style.border = ''; } |
CSS
|
1 2 3 4 5 6 7 8 |
.div-attributes { width: 500px; height: 300px; } button { margin: 10px; } |
HTML
|
1 2 3 |
<div id="container" style="border: 1px solid black; background-color: lightgray;" class="div-attributes"></div> <button>Remove Border</button> |
If you want to remove the style attribute of an element completely, you can use JavaScript’s removeAttribute() method.
JS
|
1 2 3 |
document.querySelector("button").onclick = function() { document.getElementById("container").removeAttribute('style'); } |
CSS
|
1 2 3 4 5 6 7 8 |
.div-attributes { width: 500px; height: 300px; } button { margin: 10px; } |
HTML
|
1 2 3 |
<div id="container" style="border: 1px solid black; background-color: lightgray;" class="div-attributes"></div> <button>Remove `style` attribute</button> |
That’s all about removing inline CSS properties from an element using JavaScript and Query.