JavaScript에서 창 속성(뷰포트 높이, 요소 크기, 요소 위치) 가져오기-JS 튜토리얼-php.cn

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

php是最好的语言

풀어 주다： 2018-08-03 09:57:13

원래의

5193명이 탐색했습니다.

창 속성 가져오기

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

호환성을 캡슐화합니다 스크롤 휠 롤링 거리를 찾는 메서드 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>

로그인 후 복사