.css() returning inconsistent values between browsers

[Alistair]

Using jQuery v1.4.2, Firefox 3.6.6, Chrome 4.1, IE 6,7,8.

Example, I'm using the .css() function to get the value of the css attribute "background". The attribute has *not* previously been assigned a value (either in script or style sheet).

e.g. alert($(this).css("background"));

In Firefox and Chrome, the return value is an empty string (""). However in IE 6,7,8, the return value is "undefined".

Considering jQuery aims to be cross-browser and free us from writing browser-conditional code, I think the desired behaviour would be a consistent return type (ie. string) across all browsers, whether the attribute is set or not.

The result is not needing to check first if a value is present before doing something with it.

The following statement will not work across all browsers, because you can't do indexOf() on "undefined": alert($(this).css("background").indexOf("somepic.gif"));

Inconsistent return values occur for other CSS attributes as well. For example, if "background-image" is not set, .css("background-image") returns "none" in IE, and "" in Firefox & Chrome. There are many other cases as well.

It would be great if jQuery could provide standard rules across all browsers for the values that are returned from .css(), so we don't have to write browser-specific code for them.

If we want the browser-specific value, we can always use $(something).get(0).style.backgroundImage etc.

It would be a matter of jQuery checking for something like "none" for "background-image" and changing it to "" for us. This would help give us consistent return values for .css().

[sidewaysmilk]

I have noted that in $('div').css({filter}); returns "" in IE 6, 7 and 8, "none" in iOS, Chrome and Firefox, and null in Android.

[sidewaysmilk]

Dammit. That's $('div').css('filter');

[rwaldron]

Can you provide a reduced test case on jsFiddle for this issue? Thanks!

[trac-o-bot]

Automatically closed due to 14 days of inactivity.