jQuery-在窗口调整大小时删除样式属性

Question

我已经使用该网站很长时间了，并且学到了很多很棒的东西，但这是我第一次问一个问题，因为我似乎找不到其他任何可以回答它的问题。

基本上，我想做的是：在我的网站上，所有页面的主要内容块上方都有一个“促销横幅”元素。 标语包含一些长期保持静态的促销文字，因此已基于该静态高度设置了主要内容块的顶部空白。

但是，现在我们在横幅中添加了新内容，该内容将定期更改，这导致横幅扩展到其通常高度的两倍，从而使其覆盖了主要内容块的一小部分。 我可以通过其他媒体查询来解决此问题，但是我不想每次更改内容时都进行调整。

因此，我编写了这个小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添加的style属性。行，以便页边距可以恢复到样式表中的内容。

我希望这一切都是有道理的，如果有人提出任何建议，那将是极大的帮助！

Answer 1

我可能建议使用classes 。 使用以下css样式创建类似.addedMargin的类： 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);

});

这样，您可以轻松添加多种样式，并在不再需要时将其删除。