kater louis kater louis - 2 months ago 6
HTML Question

reset inline-css that has been set (only) by jQuery

I have (please don't fight the reason) the following html

<div class="something" style="background: green;"></div>


and now need to add
position: fixed
via jQuery

$(".something").css("position", "fixed");


which leaves me with the following markup in the inspector

<div class="something" style="background: green; position: fixed"></div>


And noooow I want to erase
; position: fixed
from the
style
-attribute again.

The only solution I came up with is storing the initial
position
-value via
.data()
and then on reversing setting it again.

But that leaves me with the following markup..

<div class="something" style="background: green; position: static"></div>


Unfortunately I can't have the
position
-property in the
style
-attribute afterwards. It overwrites my css coming on some class changes etc.

what I want:



I am now looking for a way to delete the parts of the
style
-attribute that jQuery has put there... something like
$(".something").css("position", unset);


Please NO
!important
suggestions for my css!



I am more looking for a clean way to solve this issue in general, rather than a solution for my specific problem here


Answer

If you want to remove a specific CSS style property, you can use the css() function and set it to an empty string to remove it :

// This will set the position attribute back to its original value
$('.something').css('position','');