jQuery - удалить атрибут стиля при изменении окна

Question

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

В основном, что я пытаюсь сделать, так это: на моем сайте у нас есть элемент «promo banner», который находится над основным блоком контента на всех страницах. Баннер содержит рекламный текст, который долгое время оставался статичным, поэтому верхний край основного блока контента был установлен на основе этой статической высоты.

Однако теперь мы добавили новый контент к баннеру, который будет регулярно изменяться, и это приводит к тому, что баннер расширяется, чтобы удвоить его обычную высоту, заставив его покрыть небольшую часть основного блока контента. Я мог бы исправить это с помощью дополнительных медиа-запросов, однако я не хочу корректировать их каждый раз, когда мы меняем контент.

Итак, я написал этот маленький скрипт jQuery, чтобы узнать, расширился ли баннер до двух строк, и если да, отрегулируйте верхний край основного блока контента, чтобы он не закрывался.

//Check if promo banner has expanded to two lines and adjust container margins accordingly 
$(window).load(function() { 

    function bannerHeight() { 
    var $banner = $('.promo-banner'); 
    if($banner.height() > 30) { 
     $('.main-content').css('margin-top',117+'px'); 
    } 
    } 
    // Execute on load 
    bannerHeight(); 
    // Execute when window is resized 
    $(window).resize(bannerHeight); 

}); 

Это в настоящее время работает отлично при загрузке страницы и при изменении размера окна вниз, однако я не могу за жизнь мне понять, как удалить JQuery добавленный атрибут стиля, когда окно изменяет размер до точки где баннер возвращается к одной строке, так что маржа может вернуться к тому, что находится в таблице стилей.

Надеюсь, это все имеет смысл, если у кого-нибудь есть какие-либо советы, это будет огромная помощь!

Answer 1

Могу я предложить использовать classes. Создайте класс .addedMargin со следующим стилем css: margin-top:117px!important /*might not need the !important*/;

//Check if promo banner has expanded to two lines and adjust container margins accordingly 

$(window).load(function() { 

    function bannerHeight() { 
    var $banner = $('.promo-banner'); 
    if($banner.height() > 30) { 
     $('.main-content').addClass('addedMargin'); 
    } 
    else 
    { 
     $('.main-content').removeClass('addedMargin'); 
    } 
    } 
    // Execute on load 
    bannerHeight(); 
    // Execute when window is resized 
    $(window).resize(bannerHeight); 

}); 

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