How to get (currentstyle or getComputedStyl e.getPropertyVa lue) 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
backgroundPosit ion 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.getComp utedStyle) {
var stijl = document.defaul tView.getComput edStyle(arrSlic es[10], '');
// var stijl = window.getCompu tedStyle(arrSli ces[10], '');
var backpos = stijl.getProper tyValue('backgr ound-position');
alert(backpos);
} else if (arrSlices[10].currentStyle) {
var backposx = arrSlices[10].currentStyle.b ackgroundPositi onX;
var backposy = arrSlices[10].currentStyle.b ackgroundPositi onY;
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 backgroundPosit ion 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.getComp utedStyle) {
var stijl = document.defaul tView.getComput edStyle(arrSlic es[10], '');
// var stijl = window.getCompu tedStyle(arrSli ces[10], '');
You should decide what you want to use: window.getCompu tedStyle() or
document.defaul tView.getComput edStyle()? 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 `getComputedSty le'; 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::getCom putedStyle() 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-getComputedStyl e>
var backpos = stijl.getProper tyValue('backgr ound-position');
However, you will observe that Firefox (1.5.0.1/Linux) returns a
ComputedCSSStyl eDeclaration object either way, not a CSSStyleDeclara tion
object as the standard calls for. This object has a getPropertyValu e()
method, however it does not need to work according to the
CSSStyleDeclara tion interface.

However, the object also has a `backgroundPosi tion' 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
getPropertyValu e() 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.mozill a.org/show_bug.cgi?id =316981>

(found as the most relevant hit for a quick search for
"background-position" on <URL:https://bugzilla.mozill a.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.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/