자바 스크립트의 절대 위치 얻기

Question

javascript를 사용하여 런타임에 div (oCell)를 만들었습니다.

다음이 div에 상대적인 다른 독립 div (임의의 div)를 배치하려고합니다. 프로그램 내에서 random-div가 절대적으로 위치해야하고 상대적으로 oCell해야합니다. oCell div는 테이블 내에있는 것처럼 상대적으로 배치됩니다.

내 문제는 상대 위치가 아닌 oCell div의 절대 위치를 찾아야한다는 것입니다.

지금까지 내가 가진 :

var oCell = document.createElement("td"); 
var height = oCell.getBoundingClientRect().top; 
var right = oCell.getBoundingClientRect().right; 
oCell.oBoxPositionTop = height; 
oCell.oBoxPositionSide = right; 

하지만 이해할 수있는,이 올바른 위치에 임의 사업부를 배치하지 차례에 oCell의 DIV의 상대 높이를 반환에서.

Answer 1

getBoundingClientRect는 뷰포트 좌표 (또는 브라우저 창에 표시된 보이는 내용에 상대적인 좌표)로 좌표를 제공합니다. 절대 위치 지정을 사용하면 문서 좌표가 필요합니다. 뷰포트 좌표를 문서 좌표로 변환하려면 getBoundingClientRect에서 반환 한 왼쪽 및 위쪽 값에 페이지의 스크롤 오프셋을 추가하십시오.

//technique used in JavaScript: Definitive Guide 
var scrollOffsets = (function() { 
    var w = window; 

    // This works for all browsers except IE versions 8 and before 
    if (w.pageXOffset != null) return {x: w.pageXOffset, y:w.pageYOffset}; 
    // For IE (or any browser) in Standards mode 
    var d = w.document; 
    if (document.compatMode == "CSS1Compat") 
    return {x:d.documentElement.scrollLeft, y:d.documentElement.scrollTop}; 
    // For browsers in Quirks mode 
    return { x: d.body.scrollLeft, y: d.body.scrollTop }; 
}()); 

//Your code: 
var oCell = document.createElement("td"); 
//changed from height to top and gets document coordinates of position 
var top = oCell.getBoundingClientRect().top + scrollOffsets.y; 
//changed from right to left 
var left = oCell.getBoundingClientRect().left + scrollOffsets.x; 
oCell.oBoxPositionTop = top; 
oCell.oBoxPositionSide = left;