JavaScript中取得視窗的屬性（視窗高度、元素尺寸、元素位置）-js教程-PHP中文網

JavaScript中取得視窗的屬性（視窗高度、元素尺寸、元素位置）

php是最好的语言

發布： 2018-08-03 09:57:13

原創

5217 人瀏覽過

取得視窗屬性

查看捲軸的滾動距離

##相容性比較混亂，同時取兩個值相加，因為不可能存在兩個同時有值
IE8及IE8以下不相容
window.pageXOffset/pageYOffset
document.body/documentElement.scrollLeft/scrollTop
#封裝相容性方法，求滾動輪滾動離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>

登入後複製

#查看視口的尺寸

適用於怪異模式（向後相容）下的瀏覽器
#標準模式下，任意瀏覽器都相容
IE及IE8以下不相容
window.innerWidth/innerHeight
document.documentElement.clientWidth/clientHeight
#document.body.clientWidth/clientHeight

#document.body.clientWidth/clientHeight

#封裝相容性方法，傳回瀏覽器視窗尺寸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>

登入後複製

檢視元素的幾何尺寸

height和width屬性老版本IE不顯示（人為解決：分別相減一下就能得出）

返回的結果並不是」即時的”
讓滾動條捲動
window上有三個方法
scroll(x,y)在x軸、y軸上滾動的位置,scrollTo(x,y)

eg：利用scroll()頁面定位功能。

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>

登入後複製