HTML 단추 또는 이미지의 좌표를 찾는 방법, 브라우저 간?

Question

이 승리가 발표 된 최근 comp.lang.javascript이에 스레드이었다하지만 코드가 게시되지 않은 : HTML 페이지에

은 어떻게 왼쪽 하단 코너 요소의 좌표 (이미지 또는 버튼을 찾을 수 있습니까 ,) 브라우저와 페이지 스타일에서 안정적으로 말합니까? "Ajax in Action"(사본)에서 옹호 된 방법은 일부 상황에서는 IE에서 작동하지 않는 것 같습니다. 문제를 쉽게하기 위해 글로벌 문서 스타일을 "전통적"또는 "과도기적"또는 무엇이든 설정할 수 있다고 가정 해 봅시다.

(모든 브라우저에서 작동하는 완전한 기능) 코드 또는 코드를 제공하십시오. "쉽습니다"라고 말하면서 DOM을 통과하는 것에 대해 말하지 말고 - 내가 그 종류를 읽고 싶다면 나는 comp.lang.javascript로 돌아갈 것이다. 이것이 반복이고 나에게 해결책을 가르키면 나를 꾸짖어 라. 나는 그것을 찾으려고 노력했다.

Answer 1

, JQuery을 사용하는 일이 같은 물건을 얻을 수있는 유일한 확실한 방법 (두려워하지 말라 , 그것은 당신이 포함해야만하는 외부 스크립트 파일입니다). 그럼 당신은 어떤을 통해 뛰어난 작동 현재 좌표, 그리고 내가 지금까지 만난 모든 브라우저를 얻을 수

$('#element').position() 

또는

$('#element').offset() 

같은 문을 사용할 수 있습니다.

Answer 2

이 시도 : jQuery를에

var elm = document.getElementById('foo'); 
var point = {x:0,y:elm.offsetHeight}; // Change to y:0 to get the top-left 

while (elm) 
{ 
    // This will get you the position relative to the absolute container, 
    // which is what you need for positioning an element within it 
    if (elm.style.position == 'absolute') 
     break; 

    point.x += elm.offsetLeft; 
    point.y += elm.offsetTop; 

    elm = elm.offsetParent; 
} 

Answer 3

: 내 경험에

var jq = $('#yourElement'); 
var position = jq.offset(); 
alert('x: ' + position.left + ', y: ' + position.top); 

var bottomLeftPixelPosition = 
    { left: position.left, top: position.top + jq.height() - 1; }; 

Answer 4

나는 이것을 사용하여 IE와 Firefox 모두에서 작동합니다.

 
var Target = document.getElementById('SomeID'); 
var Pos = findPos(Target); 

AnotherObj = document.getElementById('AnotherID'); 
AnotherObj .style.top = Pos[1] + "px"; 
AnotherObj .style.left = Pos[0] + "px"; 

//------------------------------------ 
function findPos(obj) { 
//---------------------------------------- 
    var curleft = curtop = 0; 
    if (obj.offsetParent) { 
    do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
    } while (obj = obj.offsetParent); 
    return [curleft,curtop]; 
    } 
} 

Answer 5

웹에서이 해결책을 찾았습니다.이 문제는 완전히 해결되었습니다. 출처에 대한 링크를 확인하십시오. http://www.quirksmode.org/js/findpos.html

/** This script finds the real position, 
* so if you resize the page and run the script again, 
* it points to the correct new position of the element. 
*/ 
function findPos(obj){ 
    var curleft = 0; 
    var curtop = 0; 

    if (obj.offsetParent) { 
     do { 
     curleft += obj.offsetLeft; 
     curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 

     return {X:curleft,Y:curtop}; 
    } 
} 

(너무 다른 사람의 희망) 파이어 폭스, IE8, 오페라 완벽

작품에 대한 지식 ... 안부를 공유하는 사람들에게 감사합니다,

ADynaMic