JavaScript DOM 요소 크기 및 위치_기본 지식-JS 튜토리얼-php.cn

JavaScript DOM 요소 크기 및 위치_기본 지식

WBOY

풀어 주다： 2016-05-16 16:04:33

원래의

1253명이 탐색했습니다.

1 요소의 CSS 크기를 가져옵니다

1. 스타일 인라인을 통해 요소의 크기를 가져옵니다

코드 복사 코드는 다음과 같습니다.

var box = document.getElementById('box'); // 요소 가져오기;

box.style.width;
상자.스타일.높이;

// PS: 스타일은 인라인 스타일 속성의 CSS 스타일에서만 너비와 높이를 가져올 수 있습니다. 없으면 가져오고, 비어 있으면 반환합니다.

2. 계산을 통해 요소의 크기를 구합니다

코드 복사 코드는 다음과 같습니다. var style = window.getCompulatedStyle ? window.getComputeStyle(box,null) : null || style.width;

// 추신: 계산을 통해 요소의 크기를 구합니다. 인라인/인라인 또는 링크 여부에 관계없이 계산된 결과를 반환합니다. 

// 크기가 자체적으로 설정되면 요소의 크기가 반환됩니다. 자체적으로 설정되지 않으면 IE가 아닌 경우 기본 크기가 반환되고 IE는 자동을 반환합니다.

3. CSSStyleSheet 개체의 cssRules(또는 규칙) 속성을 통해 요소의 크기를 가져옵니다.

코드 복사
코드는 다음과 같습니다.

var sheet = document.styleSheets[0]; var rule = (sheet.cssRules || sheet.rules)[0] // 첫 번째 규칙 가져오기; Rule.style.width; // 200px;
추신: cssRules는 인라인 및 링크 스타일의 너비와 높이만 얻을 수 있지만 인라인 및 계산된 스타일은 얻을 수 없습니다.

요약: 요소 크기를 얻는 위의 세 가지 CSS 방법은 요소의 CSS 크기만 얻을 수 있지만 패딩/스크롤 막대/테두리 추가와 같은 요소 자체의 실제 크기는 얻을 수 없습니다.

2 요소의 실제 크기를 가져옵니다

1.clientWidth 및 clientHeight

이 속성 세트는 요소의 콘텐츠와 패딩이 차지하는 공간을 포함하여 요소의 시각적 영역 크기를 얻을 수 있습니다.
box.clientWidth; // 200;
추신: 요소 크기가 반환되지만 기본 단위는 px입니다. 추신: 요소의 실제 크기와 관련하여 clientWidth 및 clientHeight는 다음과 같이 이해됩니다.
1. 요소에 테두리 추가, 변경 없음, 200;
2. 요소에 외부 테두리 추가, 변경 없음, 200;
3. 스크롤 막대를 추가합니다. 최종 값 = 원본 크기 - 스크롤 막대 크기
4. 패딩 증가, 최종 값 = 원래 크기 패딩 크기
추신: CSS 너비와 높이가 설정되지 않은 경우 IE가 아닌 경우 계산된 스크롤 막대 및 패딩 크기가 포함되며 IE는 0을 반환합니다.

2.scrollWidth 및 scrollHeight

이 속성 세트는 스크롤 막대 없이 요소 콘텐츠의 전체 높이를 얻을 수 있습니다.

box.scrollWidth;

// PS: 요소 크기를 반환합니다. 기본 단위는 px입니다. CSS 너비와 높이가 설정되지 않은 경우 계산된 너비와 높이를 가져옵니다.

3.offsetWidth 및 offsetHeight

이 속성 세트는 테두리/패딩 및 스크롤 막대를 포함하여 요소의 실제 크기를 반환할 수 있습니다.

상자.오프셋폭 200

추신: 요소 크기가 반환되고 기본 단위는 px입니다. CSS 너비와 높이가 설정되지 않은 경우 계산된 너비와 높이를 가져옵니다.
추신: 요소의 실제 크기에 대한 이해는 다음과 같습니다.
1. 테두리 추가, 최종 값 = 원본 크기 테두리 크기
2. 패딩 증가, 최종 값 = 원래 크기 패딩 크기
3. 외부 국경 거점 추가, 변경 없음;
4. 스크롤바를 늘리면 변화도 없고 감소도 없습니다.

추신: 요소 크기를 얻으려면 일반적으로 CSS 크기가 설정된 블록 수준 요소를 사용하는 것이 더 편리합니다.

3 요소의 주변 크기를 가져옵니다

1.clientLeft 및 clientTop

// 이 속성 세트는 요소에 의해 설정된 왼쪽 테두리와 위쪽 테두리의 크기를 가져올 수 있습니다. box.clientLeft;
2.offsetLeft 및 offsetTop(오프셋)

3.scrollTop 및 왼쪽 스크롤

// 这组属性可以获取当前元素边框相对于父元素边框的位置;
  box.offsetLeft;                  // 50;
  // PS:获取元素当前相对于父元素的位置,最好将它设置为定位position:absolute;
  // PS:加上边框和内边距不会影响它的位置,但加上外边据会累加;

  box.offsetParent;                 // 得到父元素;
  // PS:offsetParent中,如果本身父元素是<body>,非IE返回body对象,IE返回html对象;
  // 如果两个元素嵌套,如果上级父元素没有使用定位position:absolute,那么offsetParent将返回body或html对象;

// 如果说在很多层次里,外层已经定位,获取任意一个元素距离页面上的位置,可以不停的向上回溯获取累加来实现;
  box.offsetTop+box.offsetParent.offsetTop;     // 只有两层的情况下;
  // 如果多层的话,就必须使用循环或递归;
  function offsetLeft(element){
    var left = element.offsetLeft;        // 得到第一层距离;
    var parent = element.offsetParent;      // 得到第一个父元素;
    while(parent !== null){            // 判断如果还有上一层父元素;
      left += parent.offsetLeft;        // 将得到的距离累加;
      parent = parent.offsetParent;       // 将父元素也回溯;
    }                       // 然后循环;
    return left;                 // 得到最终距离;
  }

로그인 후 복사

4개의 getBoundingClientRect() 메소드

// 这组属性可以获取被滚动条隐藏的区域大小,也可设置定位到该区域;
  box.scrollTop;                  // 获取滚动内容上方的位置;

// 设置滚动条滚动到最初始的位置;
  function scrollStart(element){
    if(element.scrollTop != 0){
      element.scrollTop = 0;
    }
  }

로그인 후 복사

다섯 가지 요약

// 这个方法返回一个矩形对象,包含四个属性:left/top/right和bottom;
// 分别表示元素各边与页面上边和左边的距离;
  var box = document.getElementById('box');
  alert(box.getBoundingClientRect().top);    // 元素上边距离页面上边的距离;
  alert(box.getBoundingClientRect().right);   // 元素右边距离页面左边的距离;
  alert(box.getBoundingClientRect().bottom);   // 元素下边距离页面上边的距离;
  alert(box.getBoundingClientRect().left);    // 元素左边距离页面左边的距离;
  // PS:IE/Firefox/Opera/Chrome/Safari都支持;
  // 但在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素;
  document.documentElement.clientTop;      // 非IE为0,IE为2;
  document.documentElement.clientLeft;      // 非IE为0,IE为2;
// 兼容getBoundingClientRect()
  function getRect(element){
    var rect = element.getBoundingClientRect();
    var top = document.documentElement.clientTop;
    var left = document.documentElement.clientLeft;
    return {
      top:rect.top-top,           // 元素上边距-页面的上边距(0-0或2-2);
      bottom:rect.bottom-top,
      left:rect.left-left,         // 元素左边距-页面的左边距(0-0或2-2);
      right:rect.right-left
    }
  };

로그인 후 복사

1. 오프셋 크기: 화면에서 요소가 차지하는 모든 표시 공간을 포함합니다. 요소의 표시 크기는 패딩/스크롤바 및 테두리를 포함한 높이와 너비에 따라 결정됩니다. 2. 클라이언트 차원: 요소 콘텐츠와 해당 패딩이 차지하는 공간을 나타냅니다. 3.스크롤 크기(스크롤 크기): 스크롤되는 내용을 포함하는 요소의 크기