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

Question

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

在调整大小事件过程中，我使用.css()函数将不同属性应用于该元素，以便该div不与其他屏幕项目重叠，但是，实际上不是改变CSS，而是将style属性添加到该div在代码中。有时根据您如何调整页面大小，调整大小功能可能以如下方式结束：使用最大化按钮时，最终会导致特定div的错误位置。我正在检查一些事情以确保不会发生。

但是，我不知道这里的语法是否正确在resize函数期间检查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%'}); 
    } 

}); 

我知道这是一个有点混乱，黑客攻击有点和，但我还是想获得它的功能。

我添加了两个班，并给DIV comBrand类的最大化，在html硬编码，然后在调整大小功能，使用此代码，但是，它不能正常工作或做任何事......

$(window).resize(function() { 

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

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

}); 

Answer 1

由于Apul古普塔指出，你应该添加和删除类。因此，建立一个对夫妇类：

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 2

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

这里更多阅读：

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

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

Answer 3

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

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

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

Answer 4

尽管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');