Как я вычисляю ширину между двумя элементами?

Question

Как я вычисляю ширину между двумя элементами?

Я должен вычислить ширину между двумя элементами, но я не уверен, как я пошел бы об этом. Скажите, что у меня есть следующее:

<ul id="foo">
    <li style="width:10px;"><a href="#">1</a></li>
    <li style="width:20px;"><a href="#">2</a></li>
    <li style="width:30px;"><a href="#">3</a></li>
</ul>

Как я вычислил бы расстояние между 1 и 3 (ответ, являющийся 20 пкс)? Ширина может быть переменной, как может количество элементов списка? (Я использую Опытную платформу),

Спасибо

5

javascript prototypejs

задан Rob W 29 December 2011 в 15:30

2 ответа

Если вы имеете в виду расстояние по горизонтали, я бы сказал, что это примерно так:

X position of element 2
minus 
x position of element 1 plus width of element 1

, чтобы получить ширину, используйте getWidth ()

, чтобы получить позицию, positionedOffset () может быть правильным решением, я не уверен на 100%, и это зависит от расположения ваших элементов.

И общее предостережение: если ваши элементы имеют padding , он будет зависит от браузера (IE / FF), рассчитывается ли заполнение по ширине или нет. Это также может относиться к границе. Вам придется поиграться и посмотреть.

2

ответ дан 14 December 2019 в 01:09

Другие вопросы по тегам:

javascript prototypejs

Похожие вопросы:

score 7 · Accepted Answer

Если вы имеете в виду расстояние по горизонтали между двумя элементами, вам нужна разница между координатами верхнего правого угла левого элемента и координатами верхнего левого угла правого элемента. Верхняя правая координата элемента - это просто верхняя левая координата плюс его ширина, как указано в ответе Пекки.

Чтобы получить верхнюю левую позицию элемента, вы можете использовать javascript-метод offsetLeft (). Это возвращает смещение в измерении x между элементом и его родителем. Вы перебираете дерево DOM, добавляя поочередно offsetLeft, пока не дойдете до корня документа. Полученная сумма и есть ваша позиция по оси x. Отличный Quirksmode показывает, как это сделать.

Edit: для полноты, я включил пример javascript, чтобы найти позицию элемента:

function getNodePosition(node) {     
    var top = left = 0;
    while (node) {      
       if (node.tagName) {
           top = top + node.offsetTop;
           left = left + node.offsetLeft;       
           node = node.offsetParent;
       } else {
           node = node.parentNode;
       }
    } 
    return [top, left];
}