jQuery .css（）方法不工作 [英] jQuery .css() method not working

问题描述

我有一个代码，使用jQuery的.css（）方法来修改DIV的风格，但它不工作。这是我复制问题的代码的简化版本。

HTML：

 < input type =radioname =showid =showleftvalue =showleft> Left 
< input type =radioname =showid = showrightvalue =showright>右
< div id =cfwrapper> XXXXXXXXX< / div> 
  

CSS：

 code> #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/

解决方案

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

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/

解决方案

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/

这篇关于jQuery .css（）方法不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！