Javascript jQuery .css() 方法不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27791484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .css() method not working
提问by Rookie Vee
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.
我有一个使用 jQuery .css() 方法来修改 DIV 样式的代码，但它不起作用。这是我的代码的简化版本，它复制了该问题。
HTML:
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:
CSS：
#cfwrapper {
bottom: 10px;
left: 30px;
position: fixed;
}
JavaScript:
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.
上面代码中发生的事情是该行$('#cfwrapper').css('left','');不起作用。我希望它从“cfwrapper”中删除“left”属性（“XXXXXXXXX”然后将向左移动 30px），然后我会使用类似的语句 - $('#cfwrapper').css('right','30px');- 添加一个“right”属性，以便“XXXXXXXXX”然后转到页面右侧，但它不起作用。
Can anyone tell me why it is not working? Wasn't it supposed to work?
谁能告诉我为什么它不起作用？它不应该工作吗？
JSFiddle: http://jsfiddle.net/fidnut/hLqngbsb/
JSFiddle：http: //jsfiddle.net/fidnut/hLqngbsb/
回答by Cattla
try this .css('left','auto')
尝试这个 .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'});
}
});
回答by Bungle
Please see the answer to this question.
请参阅此问题的答案。
From the jQuery docs:
来自jQuery 文档：
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 thestyleproperty. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or<style>element.
将样式属性的值设置为空字符串——例如
$('#mydiv').css('color', '')——如果该属性已经被直接应用，无论是在 HTML 样式属性中，通过 jQuery 的.css()方法，还是通过对style属性的直接 DOM 操作，都会从元素中删除该属性。但是，它不会删除已在样式表或<style>元素中应用 CSS 规则的样式。
A more maintainable approach would be to add/remove classes to control the styling:
更易于维护的方法是添加/删除类来控制样式：
回答by moskito
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'
}
});
