Не работает jQuery.css()

У меня есть код, который использует метод 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',''); не работает. Я ожидаю, что он удалит свойство "left" из "cfwrapper" (тогда "XXXXXXXXX" переместит 30px влево), а затем я бы использовал аналогичный оператор - $('#cfwrapper').css('right','30px'); -, чтобы добавить свойство "right", чтобы "XXXXXXXXX" будет затем идти вправо от страницы, но это не сработает.

Может ли кто-нибудь сказать мне, почему он не работает? Разве это не должно было работать?

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

Ответ 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

См. ответ на этот вопрос.

Из jQuery docs:

Установка значения свойства style в пустую строку - например. $('#mydiv').css('color', '') - удаляет это свойство из элемента, если оно уже было применено непосредственно, как в атрибуте стиля HTML, через метод jQuery .css(), так и при непосредственном манипулировании DOM свойства style. Однако он не удаляет стиль, примененный с помощью правила CSS в элементе таблицы стилей или <style>.

Более удобный подход заключался бы в добавлении/удалении классов для управления стилем:

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