브라우저 높이, 창 높이, 요소 크기 및 오프셋 속성을 얻는 Node.js 메소드

아래와 같습니다.

screen.width
screen.height
 
 
screen.availHeight //获取去除状态栏后的屏幕高度
screen.availWidth //获取去除状态栏后的屏幕高度

1. 브라우저를 통해 화면 크기를 가져옵니다.

2.

//高度
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
 
//宽度
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidht
 
/ *
 * window.innerHeight  FF/CH 支持，获取窗口尺寸。
 * document.documentElement.clientHeight  IE/CH支持
 * document.body.client  通过body元素获取内容的尺寸
 
* /

의 크기 3. 스크롤바 지원 차이

스크롤바 변경이 없는 페이지의 경우 Firefox/IE가 기본값이라고 생각하세요 HTML 요소에는 스크롤바 속성이 있습니다. 몸에는 그것이 없습니다.

그러나 Chrome은 본문에 스크롤 막대 속성이 있다고 생각합니다.

따라서 호환성은 다음과 같이 작성됩니다.

   
document.documentElement.scrollTop || document.body.scrollTop

4 요소의 크기를 가져옵니다.

elemnt.offsetWidth
elemnt.offsetHeight
 
// 仅IE5不支持，放心使用吧

* offsetWidth는 다음을 포함하여 요소의 높이 치수를 가져올 수 있습니다. 너비 + 패딩[왼쪽, 오른쪽] + 테두리[왼쪽, 오른쪽]

* offsetHeight는 다음을 포함하여 요소의 너비 치수를 가져올 수 있습니다. padding[top,bottom] + Bottom[top,bottom]

5. 요소의 오프셋 속성

element.offsetTop //获取元素与其偏移参考父元素顶部的间隔距离
element.offsetLeft //获取元素与其偏移参考父元素左边的间隔距离
element.offsetParent //获取当前元素的参考父元素

*offsetTop 요소와 이전 요소 사이의 거리를 얻을 수 있습니다. 레벨의 오프셋은 상위 요소의 상단으로부터의 거리를 나타냅니다. 포함: margin[top] + top

*offsetLeft는 이전 레벨의 오프셋 참조 상위 요소의 왼쪽으로부터의 거리를 가져올 수 있습니다. 포함: margin[left] + left

* offsetParent는 IE6/7에 있으며 IE8/FF/CH와 호환성 문제가 있습니다. FF/Chrome/IE8+의

:

현재 요소가 배치된 경우 오프셋 참조 상위 요소는 그 위에 가장 가까운 위치의 요소입니다.

현재 요소의 위치가 지정되지 않은 경우 기본적으로 body가 최종 참조 상위 요소가 됩니다.

IE6/7:

위치 지정 여부에 관계없이 오프셋 참조 상위 요소는 이전 수준의 상위 요소입니다.

일반적으로:

FF/Chrome이든 IE이든 최종 참조 상위 요소는 body 요소이므로 호환 가능한 방법은 현재 요소의 오프셋 위치를 body 요소로 가져오는 것입니다. 본문 요소 값.

호환성 글쓰기

function getOffestValue(elem){
 
    var Far = null;
    var topValue = elem.offsetTop;
    var leftValue = elem.offsetLeft;
    var offsetFar = elem.offsetParent;
 
    while(offsetFar){
      alert(offsetFar.tagName)
      topValue += offsetFar.offsetTop;
      leftValue += offsetFar.offsetLeft;
      Far = offsetFar;
      offsetFar = offsetFar.offsetParent;
    }
    return {'top':topValue,'left':leftValue,'Far':Far}
  }
 
/*
 * top 当前元素距离body元素顶部的距离。
 * left 当前元素距离body元素左侧的距离。
 * Far 返回最终的参考父元素。
*/