58. (javascript/자바스크립트) view port 뷰 포트, scroll 스크롤 참고한 객체 좌표값 구하기 실시

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <script>

    	/*
    	[JS 요약 설명]
    	1. getBoundingClientRect : view port 화면 기준으로 객체 좌표값을 구할 때 사용합니다
    	2. 절대 좌표값 : 스크롤로 이동한 거리 + 현재화면을 기준으로한 좌표값을 구할 때 사용합니다
    	*/


    	/* 특정 태그 위치 좌표값 구하기 */
    	function checkLocation(){
    		console.log("checkLocation : start");
    		console.log("");

    		//view port 기준으로 좌표값 구하기
    		var target = document.getElementById("btn_one_container");
    		var targetTop = target.getBoundingClientRect().top;
    		var targetBottom = target.getBoundingClientRect().bottom;
    		var targetLeft = target.getBoundingClientRect().left;
    		var targetRight = target.getBoundingClientRect().right;

    		console.log("view port : top : " + targetTop);
    		console.log("view port : bottom : " + targetBottom);
    		console.log("view port : left : " + targetLeft);
    		console.log("view port : right : " + targetRight);
    		console.log("");


    		//절대 좌표값 구하기
    		var adtarget = document.getElementById("btn_one_container");
    		var adtargetTop = window.pageYOffset + target.getBoundingClientRect().top;
    		var adtargetBottom = window.pageYOffset + target.getBoundingClientRect().bottom;
    		var adtargetLeft = window.pageXOffset + target.getBoundingClientRect().left;
    		var adtargetRight = window.pageXOffset + target.getBoundingClientRect().right;

    		console.log("절대 좌표 : top : " + adtargetTop);
    		console.log("절대 좌표 : bottom : " + adtargetBottom);
    		console.log("절대 좌표 : left : " + adtargetLeft);
    		console.log("절대 좌표 : right : " + adtargetRight);
    		console.log("");

    	};

    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. getBoundingClientRect : view port 화면 기준으로 객체 좌표값을 구할 때 사용합니다

2. 절대 좌표값 : 스크롤로 이동한 거리 + 현재화면을 기준으로한 좌표값을 구할 때 사용합니다

*/

/* =========================== */