Как получить ограничивающую рамку оберточного встроенного элемента с прототипом

Question

Раньше я использовал cumulativeOffset () и getDimensions () для вычисления ограничивающего прямоугольника элементов, но только что понял, что cumulativeOffset возвращает верхний левый угол начала элемента. Значение: если встроенный элемент переносится, а следующая строка находится слева от начала, я получаю смещенную ограничивающую рамку.

После небольшого исследования я обнаружил, что могу использовать getClientRects (), чтобы получить все ректы. Затем я мог бы пройти и просто занять левую позицию прямоугольника, которая находится наиболее слева.

Мне было интересно, есть ли лучший способ сделать это ... Я просто не нашел функцию-прототип boundingBox (). Я пропустил это?

Редактировать: Я также только что узнал, что getClientRects () поддерживается не всеми браузерами, поэтому это не решение.

Answer 1

Я никогда не слышал о способе сделать это. Вы можете установить его положение: относительное, поместить в него абсолютно позиционированный div размером 1x1, расположить его вправо: 0, получить значение LEFT + WIDTH этого div и вычесть из этого значения ширину смещения исходного встроенного элемента.

Сказав это, полный взлом, возможно, вам нужно переосмыслить причину, по которой вы хотите это сделать!

Answer 2

Решение, данное dfitzhenry, похоже, не работает в случае многострочных встроенных элементов. Вот мое решение Javascript: получите свой встроенный элемент nextSibling, проверьте, является ли он встроенным элементом, в противном случае создайте новый встроенный элемент, добавьте его в родительский элемент вашего встроенного элемента и затем получите его offsetLeft:

 var parentContainer = inline_elm.parentNode;
 var nextsib = inline_elm.nextSibling;
 var remove_next_sibling = false;
 if(!nextsib || nextsib.clientWidth != 0){
     remove_next_sibling = true;
     var temp= document.createElement('span');
     parentContainer.insertBefore(temp, nextsib);
     nextsib = temp;
 }

 var inline_bounding_right = nextsib.offsetLeft;
 if(remove_next_sibling)    parentContainer.removeChild(nextsib);

Answer 3

Я также не вижу функции boundingBox (), но мне интересно, используя ту же технику (cumulativeOffset() и getDimensions()) для родителя через: getOffsetParent() будет делать то, что вы хотите. getOffSetParent():

"Возвращает самое близкое положение элемента предок. Если ничего не найдено, тело элемент возвращен. "

Который должен учитывать перенос слов, когда вторая строка еще слева.

Answer 4

Это старая публикация, но стандартным способом получения ограничивающего прямоугольника является getBoundingClientRect(), который поддерживается во всех основных браузерах и имеет как минимум частичную поддержку с 2009 года в большинстве браузеров. Наслаждайтесь!

P.S. getClientRects() также очень полезен для получения отдельных ограничивающих рамок обернутого текста. Кажется, он поддерживает ту же версию браузера, что и getBoundingClientRect(), поскольку один зависит от другого, и этот источник предполагает, что он хорошо поддерживается.