$(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.clientWidt
h與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高度包含了橫向滾動條的高度(IE8以及低版本瀏覽器不支持
)。工具
window.innerWidth = width + padding + border + 縱向滾動條寬度 window.innerHeight = height + padding + border + 橫向滾動條高度
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得到的是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的值。翻譯
返回自己的寬高 + padding + border + 滾動條code
全部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
這兩個屬性是元素的內容區域加上內邊距,在加上任何溢出內容的尺寸.
所以,若是沒有溢出時,這些屬性與clientWidth和clientHeight是相等的。
指定的是元素的滾動條的位置
scrollLeft和scrollTop都是可寫的屬性,經過設置它們來讓元素中的內容滾動。
獲取當前頁面滾動條縱座標的位置:document.body.scrollTop與document.documentElement.scrollTop
獲取當前頁面滾動條橫座標的位置:document.body.scrollLeft與document.documentElement.scrollLeft
document.documentElement.scrollTop
;window.pageYOffset
或者document.documentElement.scrollTop
window.pageYOffset
與document.body.scrollTop
均可以;window.pageYOffset
或者 document.documentElement.scrollTop
;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
形成影響。一點小技巧,但很實用。
可使用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);
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
實現思路:獲取當前監聽元素距離文檔的左上角的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