SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to determine the current background-color of an element using jQuery

    Hi,

    I'm currently trying jQuery and I would like to know how can you check the background color of an element.

    What I have is a button and a div that when the button is clicked the div changes to a different color but what I want is to change the background color only if the current color is blue, but if the current color is not blue leave it as is? Something like, if background color is blue , change it to red.

    In the example below it changes the color to red even though I'm checking for blue, in reality this should leave the color as green since the if statement is false. I know I'm doing it wrong thats why is not doing what I'm trying to accomplish.

    Again I'm just practicing and the question is how to determine the current background color of an element and change it based on that using an IF statement.

    Thank a lot.

    HTML:
    HTML Code:
    <button id="myButton">Click</button>
    <div id="firstDiv">SomeText</div>


    CSS:
    Code:
    #myButton{
        margin-bottom:20px;
    }
    #firstDiv{
      background-color:green;
        height:250px;
     }
    jQuery:

    Code:
    var myButton = $('#myButton');
    var firstDiv = $('#firstDiv');
    
    $('#myButton').click(function(){   
      if(firstDiv.css('background-color', 'blue')){
        firstDiv.css('background-color', 'red');
    	}  
    });

    http://codepen.io/pen/8684/9
    Thank you very much!!!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I think you have the .css() method confused as far as how it actually works, when you call the method and supply it 2 arguments it sets the value (the second argument) based on the property (the first argument). What you need to do instead of simply call .css() but just supply the property name aka background-color which will return the property value instead of setting it, see the below example.

    Code JavaScript:
    if (firstDiv.css('background-color') === 'blue') {

  3. #3
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all thanks a lot for your help.

    I changed my code as you suggested it but for some reason is not working.

    This code should be true so it should change the div's background color to red, but it doesn't.

    var myButton = $('#myButton');
    var firstDiv = $('#firstDiv');

    $('#myButton').click(function(){
    if (firstDiv.css('background-color') ==='green')
    {
    firstDiv.css('background-color', 'red');
    }

    })
    ;

    Any idea what am I doing wrong?

    Thanks a lot again.
    Thank you very much!!!

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,146
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    I haven't looked at the source but from what I know about jQuery I don't think the css() method looks at computed styles. Therefore, using css() will always be false until you explicitly set an inline style on the element. I have never needed to find the computed background style but searching how to find computed styles should lead you in the proper direction. I don't believe jQuery itself has a utility function for doing so but I might be wrong.
    The only code I hate more than my own is everyone else's.

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I ran some tests and found that jQuery convert color names and hex values into RGB there for you won't see the result your looking for, see the below link as the best solution i found is to convert the RGB value into a HEX value.

    http://www.jquery4u.com/jquery-funct.../#.T_aVsCITFow

  6. #6
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your help!
    Thank you very much!!!

  7. #7
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just wanted to thank you again for taking the time to answer my question, it really helped me to understand the concept of what I was trying to do.
    Thank you very much!!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •