首頁 >web前端 >js教程 >JavaScript中取得視窗的屬性（視窗高度、元素尺寸、元素位置）

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

php是最好的语言原創: 2018-08-03 09:57:135200瀏覽

取得視窗屬性

查看捲軸的滾動距離

##相容性比較混亂，同時取兩個值相加，因為不可能存在兩個同時有值
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>

查看元素的尺寸（視覺上的）

#dom.offsetWidth,dom.offsetHeight
#查看元素的位置

傳回最近的有定位的父級，如無，傳回body,body.offsetParent回傳null

#eg：求元素相對於文件的座標getElementPosition

#相關文章：

##js取得瀏覽器高度視窗高度元素尺寸偏移屬性的方法

Javascript實作取得視窗的大小與位置程式碼分享########相關影片：########## JavaScript陣列物件屬性length與二維陣列##########

以上是JavaScript中取得視窗的屬性（視窗高度、元素尺寸、元素位置）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：（常見面試題）js基礎從setTimeout 到 js的非同步原理下一篇：（常見面試題）js基礎從setTimeout 到 js的非同步原理

看更多