javascript - 检查 div 是否应用了特定样式

Question

在我的网站上，如果页面首次加载并且最大化/全屏显示，则 div comBrand 具有我想要应用的特定 CSS 属性。

在调整大小事件期间，我使用 .css() 函数将不同的属性应用于该元素，以便 div 不会与其他屏幕元素重叠，但是，而不是实际更改它的 CSS似乎在代码中向该 div 添加了样式属性。有时，根据您调整页面大小的方式，调整大小功能可能以这样一种方式结束:当您使用最大化按钮时，您最终会错误地放置特定的 div。我正在检查一些事情以确保不会发生这种情况。

但是，我不知道这里的语法对于在调整大小函数期间检查 div 的样式属性是否正确，因为它似乎没有按预期工作。

$(window).resize(function() {

//first check
  if ( $('#comBrand').css('top') == '155px')
  {
   //second check to see if the peculiuar event was reached where the div is positioned incorrectly but the window isn't maximized
    if ( ($('#comBrand').attr('style') == 'top: 155px;margin-left: -615px;left: 50%;') && (window.screen.width > window.screen.availWidth))
    {
    $('#comBrand').css({'top': '155px', 'margin-left': '-615px', 'left': '50%'});
    }
    else //assume that the page is already maximized and adjust the div accordingly
    {
    $('#comBrand').css({'top': '141px', 'margin-left': '0', 'left': '0'});
    }
  }
  else //default else, if the CSS of the div is anything other than what was initially checked for, set it back to its default location
  {
  $('#comBrand').css({'top': '155px', 'margin-left': '-615px', 'left': '50%'});
  }

});

我知道这有点令人困惑，有点像 hack，但我仍然想让它正常运行。

我添加了两个类，并在 html 中为 div comBrand 提供了硬编码的最大化类，然后在调整大小函数中使用了这段代码，但是，它不起作用或做任何事情...

$(window).resize(function() {   

  if ($('#comBrand').hasClass('maximized'))
        {
        $('#comBrand').removeClass('maximized');
        $('#comBrand').addClass('minimized');
        }

  else {
       $('#comBrand').removeClass('minimized');
       $('#comBrand').addClass('maximized');
  } 

});

Answer 1

您应该添加一个 CSS class 而不是单独使用 CSS 属性。之后只需使用 .hasClass 检查是否添加了类。

在这里阅读更多内容:

http://api.jquery.com/hasclass/

http://api.jquery.com/addclass/