Are there any getter jQuerys CSS translation?

Question

Hi all,

jQuery's cross browser support is amazing. However I was wondering whether the following script will work in any browser or not.

$("#block1").css('background','blue');
$("#block2").css('backgroundColor', '#0000ff');
$("#block3").css('background-color', 'rgb(0, 0, 255)');

if ( $("#block1").css('background-color') == $("#block2").css('background-color') &&  
     $("#block1").css('background-color') == $("#block3").css('background-color') )
{
   alert ( 'same color : ' + $("#block1").css('background') );
}

Demo

As you see these 3 different setter methods do exactly the same thing. Changing the background color to blue.

It seems that there are translations for the setter method of the .css method.

I was curios if there are any translations for the getter method as well.

Answer 1

You need to set backgroundColor instead of background-color, just as if you did it using standard JS - i.e. element.style.backgroundColor = '#FFFFFF';.

Answer 2

This doesn't really have anything to do with jquery ... a browser's css support is completely independent of jQuery's ability to support a cross-browser API (which you are right, is amazing ;-) ). I hate to say it, but the only way of finding out is to try that specific code snippet in the different browsers that you're targeting

Answer 3

Where you set the CSS property is a browser problem.

jQuery "normalize" only where reading the property

Answer 4

jQuery is open-source and although the code isn't very easy to read, with a little effort and by using Firebug to walk through the code you can find the information you are looking for. Let me help you with the jquery-1.3.2.

For setting a style look at line 1037. As you can see jQuery only has a special handling for IE opacity. It also uses a regular expression to convert the style name to a camel case notation. So, background-color will actually get translated to backgroundColor. See also the prop function (line 698). When setting a number to a css property and units haven't been defined, 'px' will be used. See the exclude method (line 612) for properties excluded from this pattern.

For reading a property see the curCSS function in line 781. Again opacity is special handled. Also, there is some rather complicated code for the handling of cascaded styles. See this discussion, which is actually referenced from jQuery's code. Again IE needs to be special handled.

There is also a subtle difference, when reading the style for backgroundColor and background-color. To understand what is happening, you can run the following code:

element = document.getElementById('block1');
alert(element.style['backgroundColor']);
alert(element.style['background-color']);
alert(document.defaultView.getComputedStyle( element, null ).getPropertyValue( 'background-color' ));

When reading, jQuery doesn't translate all styles to camel case. If style[name] is defined, it directly returns it. Otherwise it uses getComputedStyle. Things are more complicated for cascaded styles.