的jQuery的.css（）方法不工作

我有一個使用的jQuery的.css（）方法來修改一個DIV的樣式代碼，但它無法正常工作。這裏是我的代碼的簡化版本，它複製了這個問題。的jQuery的.css（）方法不工作

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/

來源

2015-01-06 Rookie Vee

http://stackoverflow.com/questions/9398870/remove-css-top-and-left-attributes-with-jquery –

使用時要忽略'auto'其他值 – charlietfl

謝謝大家。 Bungle的確回答了這個問題，它是用jQuery寫的！我應該開始更多關注官方幫助信息。但我知道使用額外的類，而不是試圖修改選擇器來實現相同的結果，但我的樣式表已經太複雜了，我想避免創建更多的類。這就是爲什麼我非常喜歡Cattla解決方案（也被charlietfl提及）。因此，關鍵是不要試圖刪除的內容不能被刪除，而是修改它的方式，它沒有得到的方式（通過使用「自動」）。太好了！ –

試試這個.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/

來源

2015-01-06 03:13:58 Cattla

請參閱答案this question。

從jQuery docs：

的樣式屬性的值設置爲空字符串 - 例如$('#mydiv').css('color', '') - 從元素刪除了財產，如果它已經被直接應用，無論是在HTML樣式屬性，通過jQuery的.css()方法，或者通過style財產的直接DOM操作。這不，但是，刪除已被應用在樣式表或<style>元素的CSS規則的樣式。

一個更易於維護的方法是添加/刪除類控制造型：

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

來源

2015-01-06 03:13:07 Bungle

使用類

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

來源

2015-01-06 03:16:25 moskito

的jQuery的.css（）方法不工作

回答

相關問題