how to remove the specific inline style using jQuery

Question

HTML

<div id="myDiv" style="width:100px;height:100px;transform:translate3d(0,0,0);">
    //Some Content
    </div>

Using jQuery, how to remove the specific inline style i.e transform?

Answer 1

You can use css to remove the inline style:

Setting the value of a style property to an empty string removes that property from an element.

$("#myDiv").css("transform","");

DEMO

Answer 2

Remove inline style: $("#myDiv").removeAttr("style");

Adding a new one: $("#myDiv").removeAttr("style").attr("style","color:red");

or adding a class instead: $("#myDiv").removeAttr("style").addClass("myDivClass");

PostData: .css() documentation in jQuery.com:

"...Get the value of a style property for the first element in the set of matched elements or set one or more CSS properties for every matched element..."

.css() don't remove anything... or am I wrong? Maybe you can clear the 'transform' property with something like .css("transform","");

---

Okay, you can use .css("transform","") to delete the inline css property without disturbing the remaining ones, but be careful: it affects only the inline "style" attribute, and doesn't remove anything coming from assigned classes stored in CSS sheets...

Go here and enjoy with all the options you need: another Stackoverflow thread about this concern