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

Question

On my website if the page is first loaded and it's maximized/fullscreen, the div comBrand has the particular CSS properties I want applied.

During a resize event I apply different properties to that element using the .css() function so that the div doesn't overlap with other screen items, however, instead of actually changing the CSS it appears to add a style attribute to that div in the code. Sometimes depending on how you resize the page, the resize function might have ended in such a way that when you use the maximize button, you end up the incorrect placement of the particular div. I am checking for a few things to make sure that doesn't happen.

However, I don't know if the syntax here is correct for checking the style attribute of a div during the resize function because it doesn't seem to work as expected.

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

});

I know it's a little confusing and somewhat of a hack but I'd still like to get it to function.

I added two classes, and gave the div comBrand the class of maximized hard coded in the html, and then used this code in the resize function, however, it doesn't work or do anything...

$(window).resize(function() {   

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

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

});

Answer 1

You should add a CSS class instead of using CSS properties individually. And after that just check using .hasClass to find if class added.

Read More here:

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

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

Answer 2

While Apul's answer is definitely correct, it doesn't answer the question asked. To do this, you could do the following:

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

This would work with something like:

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

and then you could test values with:

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

Answer 3

As Apul Gupta pointed out, you should be adding and removing classes. So, set up a couple classes:

CSS:

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

Next, change your logic to this:

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

Your first nested if statement doesn't do anything...You were checking to see if the CSS was X - and if so, you were setting the CSS to X. So, I removed that code.

I must admit your if/else logic is unoptimized(a bit redundant) and confusing, but this should give you an idea of what you need to do.

Answer 4

I would look at this bit, as I'm not sure you can guarantee the format of that string. At the least, you should be comparing individual fields with .css('') .

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

But as the others have suggested, I'd advocate using CSS classes instead of the style attribute.