Getting computed/current style
in [JavaScript]
|
From: David Mark on 19 Mar 2010 22:08 David Mark wrote: > David Mark wrote: >> Eric Bednarz wrote: >>> David Mark <dmark.cinsoft(a)gmail.com> writes: >>> >>>> Here's the thing. You can make use of offsetLeft/Top to check your >>>> work. For instance, take your relative position quandary. >>> ^^^^^^^^ >>> OK. >>> >>>> […] grab the offsetLeft and offsetTop (verify >>>> beforehand that they are available and numbers of course) then set the >>>> left and top styles to those. Simply put:- >>>> >>>> var offsetLeft = el.offsetLeft; >>>> var offsetTop = el.offsetTop; >>>> >>>> el.style.left = offsetLeft + 'px'; >>>> el.style.top = offsetTop + 'px'; >>> Unless I miss someting, that strategy is only useful for absolute >>> positioning (I like it, and I use it, in that context). >> Nope. Works like a charm for relative and fixed. Why wouldn't it? > > And it does appear you are missing (snipped?) the latter part of the > explanation. Remember when I said to check if it moved. That's the > key. Again, vive la différence! :) > > Yep. Immediately following the cited bit was this paragraph. Without it, the above makes no sense. Did you stop reading at that point? :) "And now for the cunning bit. Compare the new offsetLeft/Top property values to the old. If they are the same, you "guessed" right. If they are off, vive la difference! ;)"
From: Garrett Smith on 20 Mar 2010 03:24 Eric Bednarz wrote: > David Mark <dmark.cinsoft(a)gmail.com> writes: > >> Here's the thing. You can make use of offsetLeft/Top to check your >> work. For instance, take your relative position quandary. > ^^^^^^^^ > OK. > >> […] grab the offsetLeft and offsetTop (verify >> beforehand that they are available and numbers of course) then set the >> left and top styles to those. Simply put:- >> >> var offsetLeft = el.offsetLeft; >> var offsetTop = el.offsetTop; >> >> el.style.left = offsetLeft + 'px'; >> el.style.top = offsetTop + 'px'; > > Unless I miss someting, that strategy is only useful for absolute > positioning (I like it, and I use it, in that context). What for? It would provide proof that setting left and top values changes offsetTop and offsetLeft, respectively. That hardly seems worth trying to prove, though. -- Garrett comp.lang.javascript FAQ: http://jibbering.com/faq/
From: Eric Bednarz on 20 Mar 2010 07:53 David Mark <dmark.cinsoft(a)gmail.com> writes: > David Mark wrote: >> Eric Bednarz wrote: >>> David Mark <dmark.cinsoft(a)gmail.com> writes: >>>> […] grab the offsetLeft and offsetTop (verify >>>> beforehand that they are available and numbers of course) then set the >>>> left and top styles to those. Simply put:- >>>> >>>> var offsetLeft = el.offsetLeft; >>>> var offsetTop = el.offsetTop; >>>> >>>> el.style.left = offsetLeft + 'px'; >>>> el.style.top = offsetTop + 'px'; >>> Unless I miss someting, that strategy is only useful for absolute >>> positioning (I like it, and I use it, in that context). >> >> Nope. Works like a charm for relative and fixed. Why wouldn't it? > > And it does appear you are missing (snipped?) the latter part of the > explanation. I didn't miss it, I didn't think it through properly; it is obvious that you still have to do something after the above whithout comprehensively quoting the rest of your message[0], so please don't blame other people's simplemindedness on me, it's hard enough to be responsible for my own. > Remember when I said to check if it moved. That's the > key. Again, vive la différence! :) Multiplying the first offsetTop/Left value by 2 and substracting the second one does indeed result in the (computed pixel-) value of the offset property. Sometimes I'm a bit slow (posting after three in the morning doesn't help much :-). Thanks. [0] cf. <http://www.cs.tut.fi/~jkorpela/usenet/laws.html#law22>
From: David Mark on 20 Mar 2010 10:54 Eric Bednarz wrote: > David Mark <dmark.cinsoft(a)gmail.com> writes: > >> David Mark wrote: >>> Eric Bednarz wrote: >>>> David Mark <dmark.cinsoft(a)gmail.com> writes: > >>>>> […] grab the offsetLeft and offsetTop (verify >>>>> beforehand that they are available and numbers of course) then set the >>>>> left and top styles to those. Simply put:- >>>>> >>>>> var offsetLeft = el.offsetLeft; >>>>> var offsetTop = el.offsetTop; >>>>> >>>>> el.style.left = offsetLeft + 'px'; >>>>> el.style.top = offsetTop + 'px'; >>>> Unless I miss someting, that strategy is only useful for absolute >>>> positioning (I like it, and I use it, in that context). >>> Nope. Works like a charm for relative and fixed. Why wouldn't it? >> And it does appear you are missing (snipped?) the latter part of the >> explanation. > > I didn't miss it, I didn't think it through properly; it is obvious that > you still have to do something after the above whithout comprehensively > quoting the rest of your message[0], so please don't blame other > people's simplemindedness on me, it's hard enough to be responsible for > my own. Fair enough. :) > >> Remember when I said to check if it moved. That's the >> key. Again, vive la différence! :) > > Multiplying the first offsetTop/Left value by 2 and substracting the > second one does indeed result in the (computed pixel-) value of the > offset property. Sometimes I'm a bit slow (posting after three in the > morning doesn't help much :-). Thanks. NP. Glad to help!
From: Garrett Smith on 20 Mar 2010 14:00
Eric Bednarz wrote: > Garrett Smith <dhtmlkitchen(a)gmail.com> writes: > >> Eric Bednarz wrote: > >>> Since I never attempted to retrieve offset values of relatively >>> positioned elements by script, […] > >> "Offset" values and top/left style values are different >> things. > > Ah. > >> Offset", to me, is about the badly defined and highly >> inconsistent "offsetTop", "offsetLeft", and "offsetParent". > > “Offset”, to CSS 2.1, is about section 9.3.2. > "offset" is a prefix for three nasty properties and one good property. The nasties are: offsetLeft, offsetTop, and offsetParent. The one good one is offsetWidth. Those are defined in CSSOM Views, and, depending on the version of that document, you'll get completely different definitions for the bad ones. The implementations of IE 6-8 are all different. Likely IE9 will be different again. Of course other browsers all vary on what they do for those properties as well. If you're trying to obtain element coordinates, relative to the root, method getBoundingClientRect (also specified in CSSOM Views) does that. >>> <http://bednarz.nl/tmp/relative/> > > (Unfortunately I had to move that:) > > <http://bednarz.nl/sandbox/js/relative/> > >> What I do not understand is the "expected" column. What are the >> expectations coming from? > > See above; is the specification (candidate) an unreasonable point of > reference? > >>> - jQuery does nothing more than returning the wrong results provided by the >>> getComputedStyle/currentStyle branch >> To retrieve element coordinate offsets with jQuery, > > Anybody who understands the difference between relative and absolute > positioning should be able to understand why I am having a hard time to > understand this persistant fixation on wanting to get element > coordinates in respect to anything else but that element's position in > the normal flow. > It is unclear when you write "position" what you mean. Do you mean "top" and "left" values or is it something else? >> jQuery's offset >> method would be the method for that. > > I want to retrieve CSS values, and jQuery (as do some other libraries) > pretends to provide a method to do that; unsurprisingly, the cross > browser proposition is restricted to a tiny subset of the possible use > cases. Use getComputedStyle for ViewCSS and currentStyle for IE to get that. It is going to be limited to what the browsers can do. In some cases, you will find browser returning "auto" or worse -- when querying "left" value, you'll get a value that corresponds to that element's marginLeft. To get around that issue, the stylesheet will need a left value. The dfference of IE current style is even greater. -- Garrett comp.lang.javascript FAQ: http://jibbering.com/faq/ |