Are there any getter jQuerys CSS translation?

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开发者_如何学Go

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.

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

for some reason it didn't work on my google-chrome(3.0.195.27 - windows) but worked on firefox. hope it helps.

edit: further testing revealed interesting results.

a) it seems that chrome converts the #0000ff to rgb(0,0,255) but the same does not apply to "blue"

b) firefox will display very diferent results depending on the property you are asking for. Specificaly for the background-color property it converts the colors to the format rgb(0,0,255)

just watch:

chrome, 'background' property http://img237.imageshack.us/img237/7223/chrome1.png chrome, 'background-color' property http://img43.imageshack.us/img43/7383/chrome2.png chrome, 'backgroundColor' property http://img98.imageshack.us/img98/1127/chrome3.png firefox, 'background' property http://img40.imageshack.us/img40/2374/firefox1b.png firefox, 'background-color' property http://img40.imageshack.us/img40/3706/firefox2h.png firefox, 'backgroundColor' property http://img94.imageshack.us/img94/9139/firefox3.png

feel free to test it out yourself.

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

Where you set the CSS property is a browser problem.

jQuery "normalize" only where reading the property

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.