JS獲取元素的寬高以及offsetTop,offsetLeft等的屬性值

本文轉載自查看原文 2017-03-29 14:56 7276 offsetTop/ clientWidth/ offsetHeight/ offsetWidth/ offsetLeft/ scrollLeft/ clientHeight/ DOM操作/ scrollWidth

基本介紹

$(obj).width()與$(obj).height()

$(obj).width()與$(obj).height() ：jquery方式獲取元素的寬高，不包括滾動條與工具條

$(obj).width() = width $(obj).height() = height

$(window).width()與$(window).height()：獲得的是屏幕可視區域的寬高，不包括滾動條與工具條。

$(window).width() = width + padding $(window).height() = height + padding

document.documentElement.clientWidth與document.documentElement.clientHeight

document.documentElement.clientWidth與document.documentElement.clientHeight：獲得的是屏幕可視區域的寬高，不包括滾動條與工具條，跟jquery的(window).width()與(window).height()獲得的結果是一樣的。

document.documentElement.clientWidth = width + padding document.documentElement.clientHeight = height + padding

window.innerWidth與window.innerHeight

window.innerWidth與window.innerHeight：獲得的是可視區域的寬高，但是window.innerWidth寬度包含了縱向滾動條的寬度，window.innerHeight高度包含了橫向滾動條的高度(IE8以及低版本瀏覽器不支持)。

window.innerWidth = width + padding + border + 縱向滾動條寬度 window.innerHeight = height + padding + border + 橫向滾動條高度

window.outerWidth與window.outerHeight

window.outerWidth與window.outerHeight：獲得的是加上工具條與滾動條窗口的寬度與高度。

window.outerWidth = width + padding + border + 縱向滾動條寬度 window.outerHeight = height + padding + border + 橫向滾動條高度 + 工具條高度

document.body.clientWidth與document.body.clientHeight

document.body.clientWidth與document.body.clientHeight：document.body.clientWidth獲得的也是可視區域的寬度，但是document.body.clientHeight獲得的是body內容的高度，如果內容只有200px，那么這個高度也是200px,如果想通過它得到屏幕可視區域的寬高，需要樣式設置，如下：

body { height: 100%; overflow: hidden; } body, div, p, ul { margin: 0; padding: 0; }

最關鍵的是：body的height:100%影響document.body.clientHeight的值。body的margin:0,padding:0影響document.body.clientWidth的值。

offsetWidth & offsetHeight

返回本身的寬高 + padding + border + 滾動條

offsetLeft & offsetTop

所有HTML元素擁有offsetLeft和offsetTop屬性來返回元素的X和Y坐標

1.相對於已定位元素的后代元素和一些其他元素（表格單元），這些屬性返回的坐標是相對於祖先元素

2.一般元素，則是相對於文檔，返回的是文檔坐標

//獲取元素的縱坐標（相對於窗口） function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offset; }

//獲取元素的橫坐標（相對於窗口） function getLeft(e){ var offset=e.offsetLeft; if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); return offset; }

當然上面的代碼是在反復調用自身方法，也可以下面這個方法來實現，主要使用while語句：

    function getPoint(obj) { //獲取某元素以瀏覽器左上角為原點的坐標 var t = obj.offsetTop; //獲取該元素對應父容器的上邊距 var l = obj.offsetLeft; //對應父容器的上邊距 //判斷是否有父容器，如果存在則累加其邊距 while (obj = obj.offsetParent) {//等效 obj = obj.offsetParent;while (obj != undefined) t += obj.offsetTop; //疊加父容器的上邊距 l += obj.offsetLeft; //疊加父容器的左邊距  } alert("top: " + t + " left: " + l); }

怎樣理解offsetParent，人們並沒有把offsetParent翻譯為偏移父級，而是翻譯成定位父級，很大原因是offsetParent與定位有關定位父級offsetParent的定義是：與當前元素最近的經過定位(position不等於static)的父級元素，主要分為下列幾種情況：

【1】元素自身有fixed定位，offsetParent的結果為null

　　當元素自身有fixed固定定位時，我們知道固定定位的元素相對於視口進行定位，此時沒有定位父級，offsetParent的結果為null

　　[注意]firefox瀏覽器有兼容性問題

<div id="test" style="position:fixed"></div> <script> //firefox並沒有考慮固定定位的問題，返回<body>，其他瀏覽器都返回null console.log(test.offsetParent); </script>

【2】元素自身無fixed定位，且父級元素都未經過定位，offsetParent的結果為<body>

<div id="test"></div> <script> console.log(test.offsetParent);//<body> </script>

【3】元素自身無fixed定位，且父級元素存在經過定位的元素，offsetParent的結果為離自身元素最近的經過定位的父級元素

<div id="div0" style="position:absolute;"> <div id="div1" style="position:absolute;"> <div id='test'></div> </div> </div> <script> console.log(test.offsetParent); //<div id="div1"> </script>

【4】<body>元素的parentNode是null

console.log(document.body.offsetParent);//null

scrollWidth & scrollHeight

這兩個屬性是元素的內容區域加上內邊距，在加上任何溢出內容的尺寸.

因此，如果沒有溢出時，這些屬性與clientWidth和clientHeight是相等的。

scrollLeft & scrollTop

指定的是元素的滾動條的位置

scrollLeft和scrollTop都是可寫的屬性，通過設置它們來讓元素中的內容滾動。

實例1：獲取當前頁面滾動條縱坐標的位置

獲取當前頁面滾動條縱坐標的位置：document.body.scrollTop與document.documentElement.scrollTop
獲取當前頁面滾動條橫坐標的位置：document.body.scrollLeft與document.documentElement.scrollLeft

各瀏覽器下獲取scrollTop的差異:

IE6/7/8：可以使用 document.documentElement.scrollTop；
IE9及以上：可以使用window.pageYOffset或者document.documentElement.scrollTop
Safari：window.pageYOffset 與document.body.scrollTop都可以；
Firefox:：火狐等等相對標准些的瀏覽器就省心多了，直接用window.pageYOffset 或者 document.documentElement.scrollTop；
Chrome：谷歌瀏覽器只認識document.body.scrollTop;

注：標准瀏覽器是只認識documentElement.scrollTop的，但chrome雖然我感覺比firefox還標准，但卻不認識這個，在有文檔聲明時，chrome也只認識document.body.scrollTop.

由於在不同情況下，document.body.scrollTop與document.documentElement.scrollTop都有可能取不到值，那到底網頁的scrollTop值怎么得到呢？難道又要用JavaScript進行判斷？

其實不必。因為document.body.scrollTop與document.documentElement.scrollTop兩者有個特點，就是同時只會有一個值生效。比如document.body.scrollTop能取到值的時候，document.documentElement.scrollTop就會始終為0；反之亦然。所以，如果要得到網頁的真正的scrollTop值，如果不考慮safari，可以這樣：
var sTop=document.body.scrollTop+document.documentElement.scrollTop;（但是一般都不這樣做的）
這兩個值總會有一個恆為0，所以不用擔心會對真正的scrollTop造成影響。一點小技巧，但很實用。

獲取scrollTop的值

可以使用window.pageYoffset
Window pageXOffset 和 pageYOffset 屬性其定義：pageXOffset 設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。pageYOffset 設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。所有主流瀏覽器都支持 pageXOffset 和 pageYOffset 屬性。

注意： IE 8 及更早 IE 版本不支持該屬性,但可以使用 "document.documentElement.scrollLeft" 和 "document.documentElement.scrollTop" 屬性。

由於谷歌兼容問題，可以使用document.body.scrollLeft和document.body.scrollTop 或者window.pageXoffset與window.pageYoffset。

最終兼容做法：

var heightTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(heightTop);

實例2：獲取某個元素距離文檔區域的距離

jQuery實現方式：

var top = $('.btn').offset().top;
console.log(top); //2080

JS實現方式：

function getPoint(obj) { //獲取某元素以瀏覽器左上角為原點的坐標  
    var t = obj.offsetTop; //獲取該元素對應父容器的上邊距  
    var l = obj.offsetLeft; //對應父容器的上邊距  
    //判斷是否有父容器，如果存在則累加其邊距  
    while (obj = obj.offsetParent) {
        t += obj.offsetTop; //疊加父容器的上邊距  
        l += obj.offsetLeft; //疊加父容器的左邊距  
    }  
    return {
        x:l,
        y:t
    }
}  

var top2 = getPoint(document.getElementsByClassName('btn')[0]);
console.log(top2.y); //2080

實例3：監聽某個元素是否已經在可視區域

實現思路：獲取當前監聽元素距離文檔的左上角的top距離；根據這個距離和當前可視區域的高度+文檔滾動距離進行比較，即scrollTop <= top <= document.documentElement.clientHeight + scrollTop

jquery實現方式：

$(function(){
    var top = $("#btn").offset().top; //距離文檔頂部的距離
    var windowHeight = document.documentElement.clientHeight; //可視區域的高度
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        if(top >= scrollTop && top <= windowHeight + scrollTop){
            console.log('在可視區域了');
        }
    });
})

JS實現方式：

function getPoint(obj) { //獲取某元素以瀏覽器左上角為原點的坐標  
    var t = obj.offsetTop; //獲取該元素對應父容器的上邊距  
    var l = obj.offsetLeft; //對應父容器的上邊距  
    //判斷是否有父容器，如果存在則累加其邊距  
    while (obj = obj.offsetParent) {
        t += obj.offsetTop; //疊加父容器的上邊距  
        l += obj.offsetLeft; //疊加父容器的左邊距  
    }  
    return {
        x:l,
        y:t
    }
}

window.onload = function(){
    var top = getPoint(document.getElementById('btn')).y; //距離文檔頂部的距離
    var windowHeight = document.documentElement.clientHeight; //可視區域的高度
    window.onscroll = function(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(top >= scrollTop && top <= windowHeight + scrollTop){
            console.log('在可視區域了');
        }    
    }
}

兼容性

1.window innerWidth 和 innerHeight 屬性與outerWidth和outerHeight屬性IE8以及以下不支持。

2.測試瀏覽器IE，火狐，谷歌，360瀏覽器，Safari都支持document.documentElement.clientWidth與document.documentElement.clientHeight。

結論

獲取屏幕的可視區域的寬高可使用jquery的方式獲得，也可以使用原生js獲得，即：

document.documentElement.clientWidth與document.documentElement.clientHeight

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js獲取元素的寬高關於js中的offsetLeft和offsetTop屬性和css中translate的問題詳解各種獲取元素寬高及位置的屬性原生js獲取元素的寬高原生js獲取元素的寬高各種情況上JS獲取元素寬高用js獲取元素的屬性值一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight） js獲取元素的屬性值獲取元素的寬、高和位置