집 > 기사 > 웹 프론트엔드 > div Coordinates_javascript 기술을 얻는 Node.js 메소드

div Coordinates_javascript 기술을 얻는 Node.js 메소드

WBOY원래의: 2016-05-16 15:31:561548검색

이 기사의 예에서는 js에서 div 좌표를 얻는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

HTML에서 가장 일반적으로 사용되는 컨트롤은 div인데 div의 좌표는 어떻게 구하나요?

다음 방법을 사용할 수 있습니다.

/***
 * 获取div的坐标
 * @param divObj
 * @returns {{width: number, height: number, left: *, top: Window}}
 */
com.whuang.hsj.divCoordinate=function(divObj){
  if(typeof divObj == 'string'){
    divObj=com.whuang.hsj.$$id('divObj');
  }
  return {'width':divObj.offsetWidth,'height':divObj.offsetHeight,
    'x':divObj.offsetLeft,'y':divObj.offsetTop,
    'scrollLeft':com.whuang.hsj.getScroll().left,'scrollTop':com.whuang.hsj.getScroll().top};
}
// Cross browser gets the position of scroll
com.whuang.hsj.getScroll=function(){
  return {
    top:document.documentElement.scrollTop || document.body.scrollTop, 
    left:document.documentElement.scrollLeft || document.body.scrollLeft 
  }
}

Com.whuang.hsj.divCoordinate() 메소드 소개

기능: div 좌표를 반환합니다.
매개변수: div 개체 또는 div의 ID(문자열);

반환 값: 객체, 6가지 속성 포함:

너비: div 자체의 너비

height: div 자체의 높이
x: div 왼쪽 상단의 x 좌표
y: div 왼쪽 상단의 y 좌표;
scrollLeft: 가로 스크롤 막대의 위치
scrollTop: 세로 스크롤 막대의 위치

테스트 페이지:

<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
  <script type="text/javascript" src="js/common_util.js"></script>
  <script type="text/javascript">
  function run(){
      var loc=com.whuang.hsj.divCoordinate('divObj');
//      document.writeln();
      com.whuang.hsj.$$id('text22').innerHTML="width:"+loc.width+"   ,   height:"+loc.height+"  ,  scrollTop:"+loc.scrollTop+"  ,  scrollLeft:"+loc.scrollLeft+"  , x:"+loc.x+"  ,  y:"+loc.y;
    }
  </script>
</head>
<body>
<div style="width: 599px;height: 499px;background-color: mediumvioletred;" id="divObj" >
</div>
<br>
<input type="button" value="run" onclick="run();" >
<div id="text22" style="width: 400px;" >
  </div>
</body>
</html>

실행 결과:

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：자바스크립트 함수 학습 및 관련 프로그래밍 습관 요약 가이드_기본지식다음 기사：자바스크립트 함수 학습 및 관련 프로그래밍 습관 요약 가이드_기본지식

div Coordinates_javascript 기술을 얻는 Node.js 메소드

관련 기사