jQuery CSS bug in IE8

Question

I have a bug in IE8 when trying to get a property from css for an element with background image.

el.css({ 'background-position': "10px 10px"}); //set some 
alert(el.css("background-position")); //get the value

In Opera, FF, Chrome, Safari works I get "10px 10px". Not in IE8 where I get undefined. I opened a bug report, but until then what do you think it will be a good workaround this problem. How should I get this values in some another way?

Answer 1

this should help.

it links to jquery ticket 2462 which is also interesting

Edit first link dead, wayback machine to the rescue.

And, just in case archive.org ever packs up, here is the contents of the dextrose blog post.

jQuery (at least up till version 1.2.6) has a problem with Internet Explorer when asking the background-position of an object.

$('h1:first').css('background-position');

In the other A-grade browsers, you get 2 values (in px or %) representing respectively the x-position and y-position of the element. In Internet Explorer (6 and 7) you get undefined. The problem is that IE doesn't know what background-position is, it only knows 2 other calls: background-position-x and background-position-y. Here is a slice of JavaScript code to handle this problem.

(function($) {
  jQuery.fn.backgroundPosition = function() {
    var p = $(this).css('background-position');
    if(typeof(p) === 'undefined') 
        return $(this).css('background-position-x') 
               + ' ' + $(this).css('background-position-y');
    else return p;
  };
})(jQuery);

You can now use this jQuery plugin to get the background-position of an element:

$('h1:first').backgroundPosition();

Answer 2

I've never tried this but i found that by requesting the positions individually u get a result, so:

alert(el.css("background-position-y")); //get the y value
alert(el.css("background-position-x")); //get the x value

then you can combine the two :)

Answer 3

If you alert the background-property, then you'd also get the position. A very bad workaround, but the first I could think of...

alert(el.css("background")); //url(some/url/to/image.jpg) no-repeat 10px 10px

And then you'd have to just get out the numerical values that are followed by "px"

Answer 4

I will finally parse them from:

alert(el.attr('style')); // this seems to work in all browsers