How to get (currentstyle or getComputedStyle.getPropertyValue) background-position in Firefox ? (works for IE & O)

[Pugi!]

I would like to obtain the the position of backgroundimage of a div because
I use it for animation. The following code works for Internet Explorer
(takes the else if) and returns positionx '10px' and position y '25px' (the
backgroundPosition doesn't work). Opera follows the first road (if) and
returns '10px 25px'. Firefox follows the same road (first if) as Opera but
returns a blank.

if (window.getComputedStyle) {
var stijl = document.defaultView.getComputedStyle(arrSlices[10], '');
// var stijl = window.getComputedStyle(arrSlices[10], '');
var backpos = stijl.getPropertyValue('background-position');
alert(backpos);
} else if (arrSlices[10].currentStyle) {
var backposx = arrSlices[10].currentStyle.backgroundPositionX;
var backposy = arrSlices[10].currentStyle.backgroundPositionY;
alert ('posx = ' + backposx + ' & posy = ' + backposy);
} else {
alert('Your browser does not support this shit!');
}

If I replace background-position with 'width' even Firefox returns a result.

thanx,

Pugi!

[Thomas 'PointedEars' Lahn]

Pugi! wrote:
^^^^^
Who?

I would like to obtain the the position of backgroundimage of a div
because I use it for animation. The following code works for Internet
Explorer (takes the else if) and returns positionx '10px' and position y
'25px' (the backgroundPosition doesn't work). Opera follows the first road
(if) and returns '10px 25px'. Firefox follows the same road (first if) as
Opera but returns a blank.

if (window.getComputedStyle) {
var stijl = document.defaultView.getComputedStyle(arrSlices[10], '');
// var stijl = window.getComputedStyle(arrSlices[10], '');
You should decide what you want to use: window.getComputedStyle() or
document.defaultView.getComputedStyle()? Apparently both refer to the
same method in the Gecko DOM, meaning that `document' implements the
DocumentView interface, and `window' implements the AbstractView
interface of W3C DOM Level 2 Views. Since `window' refers to the
Global Object in that DOM, you could use only `getComputedStyle'; you
would have to replace the type-converting test by a proper feature test
(typeof ... == "function") anyway. Not everything that exists can also
be called.

However, using the empty string as value of the second argument of
ViewCSS::getComputedStyle() is not standards compliant. It has to be
`null' (which works in Opera 8.51/Linux, too):

<URL:http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle>
var backpos = stijl.getPropertyValue('background-position');
However, you will observe that Firefox (1.5.0.1/Linux) returns a
ComputedCSSStyleDeclaration object either way, not a CSSStyleDeclaration
object as the standard calls for. This object has a getPropertyValue()
method, however it does not need to work according to the
CSSStyleDeclaration interface.

However, the object also has a `backgroundPosition' shortcut property
with the empty string as its value even if the CSS property value is
different (while its other shortcut properties have the value
getPropertyValue() returned if the corresponding property name was
used as its argument), which is clearly a bug. See below.
If I replace background-position with 'width' even Firefox returns a
result.

<URL:https://bugzilla.mozilla.org/show_bug.cgi?id=316981>

(found as the most relevant hit for a quick search for
"background-position" on <URL:https://bugzilla.mozilla.org/>)
HTH

PointedEars

[Randy Webb]

Thomas 'PointedEars' Lahn said the following on 3/17/2006 2:24 PM:

Pugi! wrote:
^^^^^
Who?

That would be "Pugi!". Can you not read a Poster's name anymore?

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/