All geek questions in one place

I cannot access the visual layout of an element using JS

I have a multi-column layout in UIWebview (webkit control), but I am having problems accessing the "visual" layout of the element.

I switch tapX to 4096 (4 x 1024, where 1024 is the height of the “column page”) and get the correct “tapped” element, but I can’t tell if I am on the edge or in the middle of the element. I need an absolute top and left position, so I can animate the effect of the layer above the top of the element using a rectangle (e.left, e.top, width, height) - getting the correct e.left and e.top is difficult.

tapElement.offsetTop ignores the layout of the column and the conversion does not work.

 var tapElement = document.elementFromPoint(tapX, tapY); if (!tapElement) return; var realLeft = window.getComputedStyle(tapElement).getPropertyValue("offsetLeft"); var realTop = window.getComputedStyle(tapElement).getPropertyValue("offsetTop");

Decision:

 // Figuring out the real top and left positions is difficult // under the CSS3 multi column layout... But this works :) /* // jQuery method var realLeft = $(tapElement).offset().left; var realTop = $(tapElement).offset().top; */ // DOM method var box = tapElement.getBoundingClientRect(); var doc = tapElement.ownerDocument; var docElem = doc.documentElement; var body = doc.body; var win = window; var clientTop = docElem.clientTop || body.clientTop || 0; var clientLeft = docElem.clientLeft || body.clientLeft || 0; var scrollTop = win.pageYOffset || docElem.scrollTop || body.scrollTop; var scrollLeft = win.pageXOffset || docElem.scrollLeft || body.scrollLeft; var realTop = box.top + scrollTop - clientTop; var realLeft = box.left + scrollLeft - clientLeft;
+6
source share
1 answer

You can try the "offset" of the jQuery method. Here is the documentation for him. http://api.jquery.com/offset/

If you cannot use jQuery directly, code verification can help solve your problem. (Take the debug version for this.)

+1
source

Source: https://habr.com/ru/post/900959/

More articles:


All Articles