Question

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

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

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

$(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%'});
  }

});

我知道它有点令人困惑，有点像黑客，但我仍然希望让它发挥作用。

我添加了两个类，并在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/

Answer 2

尽管Apul的答案肯定是正确的，但它没有回答问题。为此，您可以执行以下操作：

var styles = $('#myDiv').attr('style').split(';');
var stylesKeyValue = {};
styles.forEach(function(value) {
    stylesKeyValue[value.split(':')[0]] = value.split(':')[1];
});

这适用于：

<div id="myDiv" style="background-color:pink;min-height:20px;"></div>

然后您可以使用以下方法测试值：

console.log(stylesKeyValue['background-color'] == 'pink');

Answer 3

正如Apul Gupta指出的那样，你应该添加和删除类。所以，设置几个类：

CSS：

.FirstClass
{
top: 155px;
margin-left -615px;
left:50%;
}
.SecondClass
{
top:141px;
margin-left:0;
left:0;
}

接下来，将您的逻辑更改为：

    if (!$('#comBrand').hasClass('FirstClass') && (window.screen.width > window.screen.availWidth)){
        $('#comBrand').removeClass("FirstClass");
        $("#comBrand").addClass("SecondClass");
        }
  }
  else {
       $("#comBrand").removeClass("SecondClass");
       $("comBrand").addClass("FirstClass");
  }

您的第一个嵌套if语句没有做任何事情......您正在检查CSS是否为X - 如果是，您将CSS设置为X.所以，我删除了该代码。

我必须承认你的if / else逻辑未被优化（有点多余）并且令人困惑，但这应该让你知道你需要做什么。

Answer 4

我会看这一点，因为我不确定你能保证该字符串的格式。至少，您应该将各个字段与.css('')进行比较。

$('#comBrand').attr('style') == 'top: 155px;margin-left: -615px;left: 50%;'

但正如其他人所建议的那样，我主张使用CSS类而不是style属性。

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

4 个答案: