removeAttr() не применяется?

Question

Я использую zepto.js для моего текущего проекта, который имеет тот же метод removeAttr(), что и jquery.

Я применяю margin-top к кучу элементов - отлично работает.

var $apply = $('aside[role="sub"], aside[role="event-info"], aside[role="attend"]'); 
$apply.css('margin-top', '100px'); //works fine 

Однако мне также необходимо удалить его снова в случае изменения размера.

if ($(window).width() <= 984) { 
    //$apply.removeAttr('style'); //doesn't take effect 
    $apply.css('margin-top', '0'); //works fine 
    console.log('< 984');  
} 

Так что я в состоянии установить margin-top обратно 0, но не может полностью удалить атрибут стиля из селектора.

Любые идеи, почему? Я не получаю никаких эротов, это просто не вступает в силу.

Answer 1

Правильный способ его удаления - не устанавливать значение при использовании .css.

$apply.css('margin-top', ''); // remove property 

Когда значение свойства является пустым, то свойство удаляется.

Подробнее here.

Answer 2

От http://api.jquery.com/css/

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

Таким образом, вы можете использовать $apply.css('margin-top', '') удалить margin-top стиль.

Используйте .removeClass(), чтобы удалить все стили из элемента.

Answer 3

Я бы рекомендовал вам создать класс CSS, который вы добавите и удалите. Таким образом, вы можете легко изменить значение поля в одном месте и не менять его в нескольких местах.

CSS:

.myMargin { margin-top : 100px; } 

JS:

var $apply = $('aside[role="sub"], aside[role="event-info"], aside[role="attend"]'); 
$apply.addClass("myMargin"); 

В случае изменения размера:

if ($(window).width() <= 984) { 
    $apply.removeClass("myMargin"); 
    console.log('< 984');  
}