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

Однако мне также нужно удалить его снова в событии resize.

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

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

Узнайте больше здесь.

Answer 2

С http://api.jquery.com/css/

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