Change CSS entry using jQuery

Question

I have this html.

<div class="menu">File</div>
<div class="menu">Edit</div>
<div class="menu">Help</div>

And I have this CSS.

.menu { 
    float:left; 
    width:150px; 
    position: relative;
}

For some reason, I need to disable the float:left and position:relative, and return it to "unset" state, if I click on a special button. But this code doesn't work.

function doThat() {
    $('.menu').css ( { "float":"", "position":"" } );
}

How can I do this? The problem is this is not an inline CSS. Thanks.

EDIT: so according to the solution works for me from @alexfreiria, I append the answer here.

function doThat() {
    $('.menu').css ( { "float":"inherit", "position":"inherit" } );
}

And this works on IE. Thank you all!

Take a look at stackoverflow.com/questions/490910/… for why this doesnt work — Wesley Smith
– Wesley Smith, Commented Mar 27, 2015 at 3:48
@DelightedD0D I know. That's why I said "The problem is this is not an inline CSS." So there's no solution to make this work? — Chen Li Yong
– Chen Li Yong, Commented Mar 27, 2015 at 3:50

Alex · Accepted Answer · 2015-03-27 03:55:56Z

4

Change:

function doThat() {
    $('.menu').css ( { "float":"", "position":"" } );
}

To:

function doThat() {
    $('.menu').css ( { "float":"initial", "position":"initial" } );
}

More on the inherit, initial and unset property values.

edited Mar 27, 2015 at 3:55

answered Mar 27, 2015 at 3:48

Alex

35.5k5 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chen Li Yong Over a year ago

Wait, is that means you asked me to use either the inherit or initial, or use the literal "inherit|initial" ?

Mr. Alien Over a year ago

It's better to specify none and static instead of using initial which is not supported in IE

Chen Li Yong Over a year ago

@Mr.Alien thank you for the clarification! But at least inherit works in my case, and it's in IE. Thank you!

Bhojendra Rauniyar · Accepted Answer · 2015-03-27 03:49:18Z

1

This should do:

$('.menu').css ({
   'float': 'none', //initial state is none
   'position': 'static' //initial state is static
});

answered Mar 27, 2015 at 3:49

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

1 Comment

Chen Li Yong Over a year ago

Thank you! I understand your explanation. But I think the answer from @alexfreiria is more general, because I don't have to remember about what is the initial state, and better yet, I also don't have to remember the inherited state from its parent. But thank you anyway!

Collectives™ on Stack Overflow

Change CSS entry using jQuery

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related