jQuery .css() method not working

I have a code that uses jQuery .css() method to modify the style of a DIV but it is not working. Here is a simplified version of my code that replicates the issue.

HTML:

<input type="radio" name="show" id="showleft" value="showleft">Left <input type="radio" name="show" id="showright" value="showright">Right <div id="cfwrapper">XXXXXXXXX</div>

CSS:

#cfwrapper { bottom: 10px; left: 30px; position: fixed; }

JavaScript:

$("input:radio[name=show]").click(function(event){ if (event.target.id == 'showleft') { // remove property 'right:30px' // add property 'left:30px' } else if (event.target.id == 'showright') { $('#cfwrapper').css('left',''); // remove property 'left:30px' // add property 'right:30px' } });

What happens in the above code is that the line $('#cfwrapper').css('left',''); does not work. I would expect it to remove the 'left' property from "cfwrapper" ("XXXXXXXXX" would then move 30px to the left) and then I would use a similar statement - $('#cfwrapper').css('right','30px'); - to add a "right" property so that "XXXXXXXXX" would then go to the right of the page, but it does not work.

Can anyone tell me why it is not working? Wasn't it supposed to work?

JSFiddle: http://jsfiddle.net/fidnut/hLqngbsb/

Answer1:

try this .css('left','auto')

$("input:radio[name=show]").click(function(event){ if (event.target.id == 'showleft') { document.getElementById('op').innerHTML='Left side'; $('#cfwrapper').css({'left':'30px','right':'auto'}); } else if (event.target.id == 'showright') { document.getElementById('op').innerHTML='Right side'; $('#cfwrapper').css({'left':'auto','right':'30px'}); } });

http://jsfiddle.net/hLqngbsb/2/

Answer2:

Please see the answer to this question.

From the jQuery docs:

Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <style> element.

A more maintainable approach would be to add/remove classes to control the styling:

http://jsfiddle.net/0hh80mkd/2/

Answer3:

Use class

.cfwrapper { bottom: 10px; left: 30px; position: fixed; } .cfwrapperDis{ bottom: 10px; left: 30px; position: fixed; }

then

$("input:radio[name=show]").click(function(event){ if (event.target.id == 'showleft') { // remove property 'right:30px' // add property 'left:30px' } else if (event.target.id == 'showright') { $('#cfwrapper').removeClass("cfwrapper").addClass("cfwrapperDis"); // remove property 'left:30px' // add property 'right:30px' } });

人吐槽 人点赞

Recommend

Comment

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:jQuery .css() method not working