Я не могу получить доступ к визуальному расположению элемента с помощью JS - PullRequest
Новая
       6

Я не могу получить доступ к визуальному расположению элемента с помощью JS

6 голосов
/ 07 ноября 2011

У меня есть многостолбцовый макет в UIWebview (элемент управления webkit), но у меня возникают проблемы с доступом к «визуальному» расположению элемента.

Я сдвигаю tapX на 4096 (4 x 1024, где 1024 - высота «столбчатой ​​страницы») и получаю правильный «постучанный» элемент, но я не могу определить, нахожусь ли я на краю или посередине элемента. Мне нужны абсолютные верхняя и левая позиции, поэтому я могу анимировать эффект слоя поверх элемента, используя прямоугольник (e.left, e.top, width, height) - получая правильные значения e.left и e.top оказывается хитрым.

tapElement.offsetTop игнорирует расположение столбцов, и преобразование не работает. 

var tapElement  = document.elementFromPoint(tapX, tapY);

if (!tapElement)
    return;   

var realLeft    = window.getComputedStyle(tapElement).getPropertyValue("offsetLeft");
var realTop     = window.getComputedStyle(tapElement).getPropertyValue("offsetTop");

Решение: 

// 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;

1 Ответ

1 голос
/ 07 ноября 2011

Вы можете попробовать метод JQuery "offset".Вот документация для этого.http://api.jquery.com/offset/

Если вы не можете использовать JQuery напрямую, изучение кода может помочь решить вашу проблему.(Возьмите для этого отладочную версию.)

...