두 요소 사이의 너비는 어떻게 계산합니까?

두 요소 사이의 너비를 계산해야하지만 어떻게해야 할 지 잘 모르겠습니다. 다음이 있다고 가정 해 보겠습니다.두 요소 사이의 너비는 어떻게 계산합니까?

<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 사이의 거리 (20px가되는 답)를 계산합니까? 너비는 목록 항목의 수만큼 가변적 일 수 있습니까? 당신은 수평 거리를 의미하는 경우

감사

출처

2009-12-13 Rich

두 요소 간의 수평 거리를 의미하는 경우 왼쪽 요소의 오른쪽 상단 좌표와 오른쪽 요소의 왼쪽 상단 좌표 사이에 차이가 필요합니다. 요소의 오른쪽 상단 좌표는 Pekka의 답에서 주어진 것처럼 왼쪽 상단 좌표와 너비입니다.

요소의 왼쪽 상단 위치를 얻으려면 javascript 메서드 offsetLeft()를 사용할 수 있습니다. 이것은 요소와 그 부모 사이의 x 차원에서 오프셋을 반환합니다. DOM 트리를 반복하여 문서 루트에 도달 할 때까지 연속 된 offsetLeft를 추가합니다. 결과 합계가 x 위치입니다. 우수한 Quirksmode은이를 수행하는 방법을 보여줍니다.

편집 : 완성도, 나는 요소의 위치를 찾기 위해 자바 스크립트 예를 들면 다음과 같습니다

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]; 
}

출처

2009-12-13 13:17:13

감사들, 당신은 가까운이 (내 실제 예제는 훨씬 더 복잡 해결에 저를 얻었으나, 한 당신 옳은 길에 나를 잡았어!) – Rich

를 (필자는 프로토 타입 프레임 워크를 사용하고 있습니다), 나는 그것이 같은 것을 말할 것이다 : 사용

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

의 폭을 얻을 getWidth()

위치를 얻으려면 positionedOffset()이 옳은 것일 수 있습니다. 나는 100 % 확실하지 않으며 요소의 위치에 따라 다릅니다.

일반적인주의 사항으로, 요소에 padding이있는 경우 패딩이 너비로 계산되는지 여부는 브라우저 (IE/FF)에 따라 다릅니다. 이는 국경에도 적용될 수 있습니다. 당신은 놀고보아야 할 것입니다.

출처

2009-12-13 12:09:07

두 요소 사이의 너비는 어떻게 계산합니까?

답변

관련 문제