Getting computed/current style
in [JavaScript]
|
From: David Mark on 13 Mar 2010 10:01 Eric Bednarz wrote: > As a side effect of looking into browser-scripting animations I recently > started to look into retrieving CSS values with script (I do agree that > the start values of an animation should ideally be set automatically). > > Incidentally, the entity known as inappropriate to cite other than as > work in progress[0] but encouraged to be referenced by the entity formerly > known as the specification/recommendation[1] says: > “Note. Dynamic movement of relatively positioned boxes can produce > animation effects in scripting environments […]” > <http://www.w3.org/TR/CSS2/visuren.html> 9.4.3 > > Since I never attempted to retrieve offset values of relatively > positioned elements by script, I wrote a little test case. I included > a column for a popular general purpose library to see if there's any > magic bullet catch provided. > > <http://bednarz.nl/tmp/relative/> > > To my surprise the results are actually even worse than I expected. Some > notable observations: > - the only browser I could find that returns useful results is Firefox > 3.6 (with the exception of resolving conflicts) > - Opera is totally broken > - jQuery does nothing more than returning the wrong results provided by the > getComputedStyle/currentStyle branch > I notice in FF3.6 that all is as expected until box #6, where the right style is declared as 1px, expected to be computed as "-1px" and the browser returns "1px" instead. Realize that the "computed" styles offered by browsers have historically differed from what the specification calls computed. Regardless, this is a case where the specification semantics are irrelevant. The results are only wrong (in a practical sense) if setting the respective styles to the retrieved values changes the position (or size) of the box (which you will likely find doesn't happen very often). That gets back to the techniques I mentioned in the other post. For the right (as opposed to left) position, the acid test should be something like:- var offsetWidth = el.offsetWidth; var rightStyle = yourComputedStyleWrapper(el, 'right'); if (rightStyle !== null) { el.style.right = rightStyle; if (el.offsetWidth != offsetWidth) { // Adjust expectations based on the difference } } A one-off feature test should not be too difficult. But again, I would stick to animating height/width and forget about right/bottom as those two have always been notably screwy cross-browser (e.g. some browsers don't even render them properly).
From: David Mark on 13 Mar 2010 10:02 Jorge wrote: > On Mar 13, 1:39 pm, Eric Bednarz <bedn...(a)fahr-zur-hoelle.org> wrote: >> (...) >> Pointers to any good in depth research on the general topic would be >> appreciated. > > Whenever I have wanted to obtain the actual position of an element I > have used .offset[Top,Left,Height,Width] rather than getComputedStyle. But that is perfectly useless for animations in many cases as you can't set those. ;)
From: Jorge on 13 Mar 2010 10:44 On Mar 13, 4:02 pm, David Mark <dmark.cins...(a)gmail.com> wrote: > Jorge wrote: > > Whenever I have wanted to obtain the actual position of an element I > > have used .offset[Top,Left,Height,Width] rather than getComputedStyle. > > But that is perfectly useless for animations in many cases as you can't > set those. ;) I said "to obtain" not "to set", David Mark. :-) -- Jorge.
From: David Mark on 13 Mar 2010 11:48 Jorge wrote: > On Mar 13, 4:02 pm, David Mark <dmark.cins...(a)gmail.com> wrote: >> Jorge wrote: >>> Whenever I have wanted to obtain the actual position of an element I >>> have used .offset[Top,Left,Height,Width] rather than getComputedStyle. >> But that is perfectly useless for animations in many cases as you can't >> set those. ;) > > I said "to obtain" not "to set", David Mark. :-) Which has no bearing on this discussion, "Jorge". :(
From: Hans-Georg Michna on 13 Mar 2010 18:09
On Sat, 13 Mar 2010 13:39:02 +0100, Eric Bednarz wrote: >retrieving CSS values with script The basics are here: http://winhlp.com/node/610#s Hans-Georg |