0

In JavaScript using jQuery during assigning the color to an element having id as 'ID' we assign as follows:

$('#ID').css({'background-color':'#FF0000'});

But how to know whether the element has already been assigned a color?

I need to check whether the element has already been assigned the color red or not. If the color red has been assigned, I need to set some flag in JavaScript.

Dan D.
  • 73,243
  • 15
  • 104
  • 123
Joy
  • 41
  • 8

3 Answers3

1

get the val 

var old_css = $('#ID').css('background-color');

or using 

var old = document.getElementById("id").style.backgroundColor;

also look at this post

Can jQuery get all CSS styles associated with an element?

Community
  • 1
  • 1
Haim Evgi
  • 123,187
  • 45
  • 217
  • 223
1

Like Haim Evgi suggested, you could get the CSS value of the element, but if you try this 

console.log(jQuery('#someId').css('background-color'));

on an element without any background-color set, you'll get transparent. Now let's say you want to expand your usecase to not only cover #f00 but a variable color, you could get into trouble.

My first idea, while reading your question was to use CSS classes to identify changes:

CSS

/* i assume red indicates an error :) */
.error { background-color: #f00; }

JavaScript

if(jQuery('#someId').hasClass('error')) {
  /* do something fancy */
}

or

jQuery.each(jQuery('.error'), function(index, value) {
  /* do something with each erroneous element */
});

This makes it also slightly more comfortable to set and check changes.

[Edit: a sample snippet]

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .error{ background-color: #f00; }
    </style>
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
    jQuery(document).ready(function() {
      console.log('Background #someId: ' + jQuery('#someId').css('background-color')); // transparent
      console.log('Background #someOtherId: ' + jQuery('#someOtherId').css('background-color')); // transparent

      console.log('#someId has error: ' + jQuery('#someId').hasClass('error')); // false
      console.log('#someOtherId has error: ' + jQuery('#someOtherId').hasClass('error')); // false

      jQuery('#someOtherId').addClass('error');

      console.log('#someId has error: ' + jQuery('#someId').hasClass('error')); // false
      console.log('#someOtherId has error: ' + jQuery('#someOtherId').hasClass('error')); // true
    });
    </script>
  </head>
  <body>
    <div id="someId">foo</div>
    <div id="someOtherId">bar</div>
  </body>
</html>
codeporn
  • 1,000
  • 1
  • 13
  • 32
  • I have updated .error{ background-color: #f00; } in my css file and when Im using if(jQuery('#someId').hasClass('error')) { alert(jQuery('#someId').hasClass('error'));} in my javascript for an id assigned with red color im getting false in the alert message.. – Joy Dec 23 '10 at 09:03
  • The element you are testing needs to have the class `error` assigned; could you provide some sample HTML code? – codeporn Dec 23 '10 at 09:14
  • Never mind, I added a sample snippet. (And corrected a small bug in an above snippet) – codeporn Dec 23 '10 at 09:57
  • Btw.: There's no need to ask your question twice: http://stackoverflow.com/questions/4517267/how-to-compare-color-assigned-for-an-element-using-java-script – codeporn Dec 23 '10 at 10:25
0

Use the .attr() function in jquery to get info about an attribute.

http://api.jquery.com/attr/

Something like 

$("#ID").attr('style')

should be a good start.

Oli
  • 2,370
  • 2
  • 26
  • 42