javascript - jQuery .css() 方法不起作用

Question

我有一段代码使用 jQuery .css() 方法来修改 DIV 的样式，但它不起作用。这是我的代码的简化版本，它复制了这个问题。

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'
    }
});

上面代码中发生的事情是行 $('#cfwrapper').css('left',''); 不起作用。我希望它从“cfwrapper”中删除“left”属性(“XXXXXXXXX”然后向左移动 30px)然后我会使用类似的语句 - $('#cfwrapper').css(' right','30px'); - 添加一个“right”属性，这样“XXXXXXXXX”就会转到页面的右侧，但它不起作用。

谁能告诉我为什么它不起作用？它不应该起作用吗？

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

Answer 1

试试这个 .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/