집 >웹 프론트엔드 >JS 튜토리얼 >JS에서 위치와 크기를 얻는 방법

JS에서 위치와 크기를 얻는 방법

高洛峰원래의: 2016-12-06 10:05:191214검색

scrollHeight, clientHeight 및 offsetHeight의 차이점

설명:

scrollHeight: 테두리 높이를 제외한 DOM 요소의 실제 콘텐츠 높이가 DOM 요소의 콘텐츠(보기 영역 이후)가 더 커집니다.

clientHeight: 스크롤 바와 테두리의 높이를 제외한 DOM 요소 콘텐츠의 시각적 영역 높이입니다.

offsetHeight: 스크롤 막대 및 테두리를 포함한 DOM 요소의 전체 높이입니다.

JS에서 위치와 크기를 얻는 방법

스크롤바가 나타나지 않을 때

이때 DOM요소에 내용이 없거나 내용이 보이는 영역을 벗어나지 않는 경우
scrollWidth=clientWidth, two 둘 다 시각적 영역의 너비입니다.
scrollHeight=clientHeight, 둘 다 시각적 영역의 높이입니다.
offsetWidth 및 offsetHeight는 DOM 요소의 전체 너비와 높이입니다.

스크롤바가 나타날 때

이때 DOM 요소에 내용이 없거나 내용이 시각적 영역
scrollWidth>clientWidth
scrollHeight>clientHeight scrollWidth 및 scrollHeight 각각 실제 콘텐츠의 너비와 높이입니다.
clientWidth와 clientHeight는 각각 콘텐츠 시각적 영역의 너비와 높이입니다.
offsetWidth와 offsetHeight는 DOM 요소의 전체 너비와 높이입니다.

데모

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>正确理解和运用与尺寸大小相关的DOM属性</title>
    <style type="text/css">
    html,body {margin: 0;}
    body {padding: 100px;}
  #box {
    overflow: scroll;
    width: 400px;
    height: 300px;
    padding: 20px;
    border: 10px solid #000;
    margin: 0 auto;
    box-sizing: content-box;
    /*
    box-sizing:content-box表示元素的宽度与高度不包括内边距与边框的宽度和高度
    box-sizing:border-box表示元素的宽度与高度包括内边距与边框的宽度和高度
     */
  }
  #box2 {
    border: 1px solid #000;
 
  }
    </style>
  </head>
  <body>
  <div id="box">
    <div id="box2">谷歌浏览器测试结果</div>
  </div>
  <script type="text/javascript">
  //offsetWidth ，offsetHeight对应的是盒模型的宽度和高度
  //scrollWidth，与scrollHeight对应的是滚动区域的宽度和高度，但是不包含滚动条的宽度！滚动区域由padding和content组成。
  //clientWidth，clientHeight对应的是盒模型除去边框后的那部分区域的宽度和高度，不包含滚动条的宽度
    var boxE=document.getElementById("box");
    var box=document.getElementById("box2");
    //对于scrollWidth没有发生横向的溢出，同时由于overflow: scroll的原因，scrollWidth 跟clientWidth相同，但是没有包含滚动条的宽度
    console.log(&#39;scrollWidth:&#39; + boxE.scrollWidth);//423
    console.log(&#39;scrollHeight:&#39; + boxE.scrollHeight);//672
 
    //clientWidth与clientHeight分别等于offsetWidth与offsetHeight减掉相应边框（上下共20px，左右共20px）和滚动条宽度后的值（chrome下滚动条宽度为17px）；
    console.log(&#39;clientWidth:&#39; + boxE.clientWidth);//423=460-20-17
    console.log(&#39;clientHeight:&#39; + boxE.clientHeight);//323=360-20-17
 
    //offsetWidth与offsetHeight与chrome审查元素看到的尺寸完全一致
    console.log(&#39;offsetWidth :&#39; + boxE.offsetWidth);//460=width+padding+border
    console.log(&#39;offsetHeight:&#39; + boxE.offsetHeight);//360=height+padding+border
  </script>
  </body>
</html>

JS를 사용하여 DOM 요소의 크기 가져오기

html 루트 요소 가져오기: document.documentElement

본문 요소 가져오기: document .body

스크롤 막대를 제외하고 페이지의 표시 영역의 너비와 높이를 가져옵니다.

IE, FF, Chrome에서 채택:
document.documentElement.clientWidth 및 document를 사용합니다. documentElement.clientHeight
참고: ie6 표준 혼합 모드에서는 위의 방법을 사용할 수 있습니다.

혼합 모드에서:

ie6은 document.body.clientWidth 및 document.body.clientHeight를 사용합니다
참고 : window.innerWidth/Height는 스크롤바와 Highly를 포함한 너비입니다. 이는 document.documentElement.clientWidth/Height와의 차이점이기도 합니다.
따라서 다음을 사용할 때 호환 가능한 쓰기에 주의하세요.

데모

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>页面视口宽高</title>
</head>
<body>
  <script type="text/javascript">
  //标准模式
  var w=document.documentElement.clientWidth;
  var h=document.documentElement.clientHeight;
  console.log(&#39;w宽：&#39;+w+&#39;---&#39;+&#39;h高：&#39;+h);
  //混杂模式
  var width=document.body.clientWidth;
  var height=document.body.clientHeight;
  //兼容写法
  var ww=document.documentElement.clientWidth||document.body.clientWidth;
  var hh=document.documentElement.clientHeight||document.body.clientHeight;
  console.log(&#39;ww宽：&#39;+ww+&#39;---&#39;+&#39;hh高：&#39;+hh);
  </script>
</body>
</html>

일반 HTML 요소의 크기 가져오기

docE.offsetWidth

docE; . offsetHeight;

스크롤 막대 스크롤 높이 가져오기(호환성 처리)

var oTop=document.documentElement.scrollTop||document.body.scrollTop;

offsetWidth 및 offsetHeight

이 두 속성은 요소의 시각적 영역의 너비와 높이를 나타냅니다. 이 값에는 요소의 테두리, 가로 패딩, 세로 스크롤 막대 너비 또는 높이, 요소 자체의 너비 또는 높이 등이 포함됩니다.

offsetWidth 및 offsetHeight 두 속성의 값은 이 요소에만 관련되며 주변 요소(상위 및 하위 요소)에는 관련이 없습니다.

offsetWidth=(테두리 너비)*2+(왼쪽 패딩)+(너비)+(오른쪽 패딩)

offsetHeight=(테두리 너비)*2+(상단 패딩)+ (height)+(padding-bottom)

offsetLeft 및 offsetTop

offsetLeft 및 offsetTop의 두 속성 값 은 offsetParent와 관련이 있습니다.

offsetParent 속성은 offsetParent를 호출하는 요소(포함 계층 구조에서 가장 가까운)에 가장 가깝고 CSS 위치가 지정된 컨테이너 요소인 객체에 대한 참조를 반환합니다. 이 컨테이너 요소가 CSS 위치에 있지 않으면 offsetParent 속성의 값은 루트 요소(즉, body 요소)에 대한 참조입니다.

두 가지 규칙:

현재 요소의 상위 요소에 CSS 위치 지정이 없는 경우(위치는 절대 또는 상대) offsetParent는 본문입니다.

현재 요소의 상위 요소에 CSS 위치 지정(위치는 절대 또는 상대)이 있는 경우 offsetParent는 가장 가까운 상위 요소를 사용합니다.

offsetLeft: offsetParent의 왼쪽 위 꼭지점을 기준으로 한 개체 요소 경계의 왼쪽 위 꼭지점의 수평 오프셋

offsetTop: 개체 요소 경계의 왼쪽 위 꼭지점을 기준으로 합니다. offsetParent의 왼쪽 위 정점 상단의 수직 오프셋)+(가운데 요소의 offsetHeight)+(현재 요소의 여백-상단)

offsetParent가 body인 경우 상황은 특별합니다:

IE8/9/10 및 Chrome:

offsetLeft = (본문의 왼쪽 여백)+(본문의 테두리 너비)+(본문의 왼쪽 여백)+(현재 요소의 왼쪽 여백).

FireFox에서:

offsetLeft = (본문의 왼쪽 여백)+(본문의 왼쪽 여백)+(현재 요소의 왼쪽 여백)

성명：

이전 기사：for in 메소드는 객체 속성을 순회하고 중첩 루프를 최적화합니다.다음 기사：for in 메소드는 객체 속성을 순회하고 중첩 루프를 최적화합니다.

JS에서 위치와 크기를 얻는 방법

관련 기사