jQuery .css() 方法不起作用答案

【问题标题】：jQuery .css() method not workingjQuery .css() 方法不起作用
【发布时间】：2015-03-03 16:42:56
【问题描述】：

我有一段代码使用 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”中删除“左”属性（“XXXXXXXXX”然后会向左移动 30px），然后我会使用类似的语句 - $('#cfwrapper').css('right','30px'); - 添加一个“右”属性，以便“ XXXXXXXXX”然后会转到页面的右侧，但它不起作用。

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

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

【问题讨论】：

stackoverflow.com/questions/9398870/…
当你想忽略其他值时使用auto
谢谢大家。 Bungle 确实回答了这个问题，它是在 jQuery 帮助中写的！我应该开始更多地关注官方帮助信息。但是我知道使用额外的类而不是尝试修改选择器来获得相同的结果，但是我的样式表已经太复杂了，我想避免创建更多的类。这就是为什么我真的很喜欢 Cattla 解决方案（charlietfl 也提到过）。因此，诀窍不是尝试删除无法删除的内容，而是以不妨碍的方式对其进行修改（通过使用“自动”）。不错！
@Mörre - 奇怪的是，我在这里发布我的问题之前已经看到了这个问题，但我无法将它与我的问题联系起来。我无法将使用“汽车”作为解决方案，即使尝试它也从未想过。我完全沉迷于删除属性的想法，而不是修改它。
很高兴您找到了解决方案。 FWIW，使用类的优点是它尊重separation of concerns - 即，它在 CSS 中保持样式，而不是在 JS 中。在一个较小的项目中，使用.css() 所以更新样式工作得很好，但随着项目的增长，它变得更加难以维护。如果在某个时候您认为50px 看起来比30px 更好，您将在JS 代码中寻找您设置30px 的各个位置，而不是在样式表中集中更新它。

标签： javascript jquery css

【解决方案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/

【讨论】：

【解决方案2】：

请看this question的回复。

来自jQuery docs：

将样式属性的值设置为空字符串——例如$('#mydiv').css('color', '') — 如果该属性已被直接应用，则从元素中删除该属性，无论是在 HTML 样式属性中，通过 jQuery 的 .css() 方法，还是通过对 style 属性的直接 DOM 操作。但是，它不会删除在样式表或 <style> 元素中使用 CSS 规则应用的样式。

一种更易于维护的方法是添加/删除类来控制样式：

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

【讨论】：

【解决方案3】：

使用类

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

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

然后

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

【讨论】：