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

基本介紹

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

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

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

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

$(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.innerWidthwindow.innerHeight:得到的是可視區域的寬高,可是window.innerWidth寬度包含了縱向滾動條的寬度,window.innerHeight高度包含了橫向滾動條的高度(IE8以及低版本瀏覽器不支持)。工具

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

window.outerWidth與window.outerHeight

window.outerWidthwindow.outerHeight:得到的是加上工具條與滾動條窗口的寬度與高度。測試

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

document.body.clientWidth與document.body.clientHeight

document.body.clientWidthdocument.body.clientHeight:document.body.clientWidth得到的也是可視區域的寬度,可是document.body.clientHeight得到的是body內容的高度,若是內容只有200px,那麼這個高度也是200px,若是想經過它獲得屏幕可視區域的寬高,須要樣式設置,以下:firefox

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 + 滾動條code

offsetLeft & offsetTop

全部HTML元素擁有offsetLeft和offsetTop屬性來返回元素的X和Y座標ip

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.pageYOffsetdocument.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 pageXOffsetpageYOffset 屬性其定義:pageXOffset 設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。pageYOffset 設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。全部主流瀏覽器都支持 pageXOffsetpageYOffset 屬性。

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

因爲谷歌兼容問題,可使用document.body.scrollLeftdocument.body.scrollTop 或者window.pageXoffsetwindow.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

相關文章
相關標籤/搜索