집 > 기사 > 웹 프론트엔드 > JavaScript에서 창 속성(뷰포트 높이, 요소 크기, 요소 위치) 가져오기

JavaScript에서 창 속성(뷰포트 높이, 요소 크기, 요소 위치) 가져오기

php是最好的语言원래의: 2018-08-03 09:57:135115검색

창 속성 가져오기

스크롤 막대의 스크롤 거리 보기
#🎜🎜 ## 🎜🎜#

호환성을 캡슐화합니다 스크롤 휠 롤링 거리를 찾는 메서드 getScrollOffset()

호환성 문제를 해결하기 위해 다음을 캡슐화해 보겠습니다. 기능:

<script type="text/javascript">
    function getScrollOffset() {
        if(window.pageXOffset) {            x : window.pageXoffset,            y : window.pageYoffset
        }
        else{
            return {                x : document.body.scrollLeft + document.documentElement.scrollLeft,                y : document.body.scrollTop + document.documentElement.scrollTop,
            }
        }
    }
</script>

뷰포트 크기 보기

브라우저에 적합 이상한 모드(이전 버전과 호환)

표준 모드에서는 모든 브라우저가 호환됩니다.

#🎜🎜 #window.innerWidth/innerHeight
document.documentElement.clientWid 일 /clientHeight
#🎜🎜 ## 🎜🎜#document.body.clientWidth/clientHeight
En 캡슐화하다 호환성 메서드를 반환하고 브라우저 뷰포트 크기를 반환합니다. getViewportOffset()
#🎜 🎜#

호환성 문제를 해결하기 위해 함수를 캡슐화해 보겠습니다.

<script type="text/javascript">    function getSViewportOffset() {        if(window.innerWidth) {            return {
                w : window.innerWidth,
                h : window.innerHeight
            }
        }else{            if(document.compatMode ==="BackCompat") {                return {
                    w : document.body.clienWidth,
                    h : document.body.clientHeight
                }
            }else{                return {
                    w : document.documentElement.clientWidth,
                    h : document.documrntElement.clientHeight
                }
            }
    }
</script>

요소의 기하학적 크기 보기# 🎜🎜#
# 🎜🎜#
매우 좋은 호환성

이 메서드는 왼쪽, 위쪽, 오른쪽, 아래쪽 및 기타 속성이 있는 개체를 반환합니다. left와 top은 요소의 왼쪽 상단 모서리의 X 및 Y 좌표를 나타내고, right 및 Bottom은 요소의 오른쪽 하단 모서리의 X 및 Y 좌표를 나타냅니다.

높이 및 너비 속성은 이전 버전의 IE에서 표시되지 않습니다. (인공적인 해결책: 별도로 빼서 가져옵니다.)
#🎜 🎜#

# 🎜🎜## 🎜🎜#
창에는 세 가지 방법이 있습니다
scroll(x,y) x축 스크롤 위치와 y- axis, scrollTo(x,y )

Difference: scrollBy()는 이전 데이터를 기반으로 누적됩니다.

예: 스크롤() 페이지 위치 지정 기능을 사용합니다.
eg: 빠르게 읽으려면 scrollBy()를 사용하세요.
운동:
자동으로 페이지를 넘기는 작은 리더를 만들어 보세요.

<!DOCTYPE html><html><head>
    <title>Document</title></head><body>文本内容    <p style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</p>
    <p style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</p></body><script type="text/javascript">
    var start = document.getElement.getElementsByTagName(&#39;p&#39;)[0];    var stop = document.getElement.getElementsByTagName(&#39;p&#39;)[1];    var timer = 0;    var key = true;   //加锁，防止连续点start产生累加加速
    start.onclick = function() {
        if(key) {
            timer = setInterval(function() {
                window.scollBy(0,10);
            },100);
            key = false;
        }
    }
    stop.onclick = function() {
        clearInterval(timer);
        key = true;
    }</script>

요소 크기 보기(시각적으로)
dom.offsetWidth,dom.offsetHeight
요소 위치 보기

# 🎜🎜 #

dom.offsetLeft,dom.offsetTop

위치가 지정된 상위 요소가 없는 요소의 경우 문서를 기준으로 한 좌표를 반환합니다. 위치가 지정된 상위 요소의 경우 가장 가까운 위치에 있는 상위 요소를 기준으로 좌표를 반환합니다.

가장 가까운 위치의 상위 항목으로 돌아가기, 없으면 본문, 본문으로 돌아가기 .offsetParent는 null을 반환합니다

eg: 문서에 상대적인 요소의 좌표를 찾습니다. getElementPosition

js 메서드를 사용하여 브라우저 높이 및 창 높이 요소 크기 오프셋 속성
크기를 가져오는 Javascript 구현 및 창 위치 코드 공유
관련 영상:
JavaScript 배열 객체 속성 길이와 2차원 배열
#🎜 🎜#

위 내용은 JavaScript에서 창 속성(뷰포트 높이, 요소 크기, 요소 위치) 가져오기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：(일반적인 인터뷰 질문) setTimeout부터 js의 비동기 원리까지 js 기본다음 기사：(일반적인 인터뷰 질문) setTimeout부터 js의 비동기 원리까지 js 기본