檢查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');