Remove inline CSS properties from an element with JavaScript/jQuery

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.

Edit in JSFiddle

 
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.

Edit in JSFiddle

 
In case you want to remove the complete styling of the element, you can use jQuery’s .removeAttr() method, as shown below:

Edit in JSFiddle

2. Using JavaScript

In pure JavaScript, you can use the removeProperty() method for removing a property from the style attribute of the element.

Edit in JSFiddle

 
Alternatively, you can set the corresponding CSS property to an empty string, which removes it from the element.

Edit in JSFiddle

 
If you want to remove the style attribute of an element completely, you can use JavaScript’s removeAttribute() method.

Edit in JSFiddle

That’s all about removing inline CSS properties from an element using JavaScript and Query.