您好,登錄后才能下訂單哦!
關(guān)于js的寬高,隨便一搜就是一大堆。這個一大堆對我來說可不是什么好事,看的頭都大了。所以今天就總結(jié)了一些比較會常用的,并說明一下應(yīng)用場景。
先來扯一下documentElement和body的微妙關(guān)系:
documentElement===html ----->> documentElement.childNode[2]===body 【很明顯,父子關(guān)系唄】
如果<! doctype html>中沒聲明html,則拿不到documentElement這個值,但此時body==documentElement,這才有了下面的兼容寫法.
ps:以下內(nèi)容就只談?wù)揾eight,width同理嘛。
js的寬高及應(yīng)用:
可視區(qū)尺寸(.clientHeight):
對document:可視區(qū)height = 整個瀏覽器的高 - 工具欄部分height.
兼容寫法:document.documentElement.clientHeight||document.documentElement.clientHeight.
對div:可視區(qū)height = height + padding.
寫法:divObj.clientHeight.
滾動距離(.scrollTop):
對document:可視區(qū)頂部到網(wǎng)頁頂部,即網(wǎng)頁被卷上去的部分.
獲取兼容寫法:document.body.scrollTop || document.documentElement.scrollTop.
設(shè)置兼容寫法:document.body.scrollTop = document.documentElement.scrollTop=...
對div:div被卷上去的部分.
獲取寫法:divObj.scrollTop.
設(shè)置寫法:divObj.scrollTop=...
.scrollHeight:
對document: document.body.scrollHeight被視為整個網(wǎng)頁的高?!揪W(wǎng)頁內(nèi)容大于clientHeight時】
獲取寫法:document.body.scrollHeight.
對div:沒有滾動條時,scrollHeight與clientHeight屬性結(jié)果相等,scrollWidth與clientWidth屬性結(jié)果相等;
存在滾動條,即存在內(nèi)容溢出的情況時,scroll屬性大于client屬性,divObj.scrollHeight包括被隱藏部分。scrollHeight可用于獲取div的wholeHeight以實現(xiàn)滾動到底部加載。
【注意】scrollHeight屬性存在兼容性問題,chrome和safari瀏覽器中,scrollHeight包含padding-bottom;而IE和firefox不包含padding-bottom.
.offsetHeight:
對document:
IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。 NS、FF 認為 offsetHeight 是網(wǎng)頁內(nèi)容實際高度,可以小于 clientHeight。
對div:
divObj.offsetHeight=height+padding+border.
安利一個好東西:
.getBoundingClientRect().top/right/bottom/left; //div的各邊距可視區(qū)的距離.
可視區(qū)加載:
1 function showDiv(){2 var showId=document.getElementById("showDiv");3 var clients=window.innerHeight||document.documentElement.clientHeigh||document.body.clientHeigh;4 var divTop=showId.getBoundingClientRect().top; //判斷是否出現(xiàn)在可視區(qū)了5 if(divTop<=clients){6 showId.classList.add('fadeInLeft');//一個帶有動畫的類7 }8 }
jQ的寬高及應(yīng)用:
width() | height():可讀寫。(length) | function(index,oldWidth){ }
innerWidth() | innerHeight():可讀寫。(length) | function(index,oldWidth){ }
outerWidth(Boolean) | outerHeight(Boolean):為true時包括margin,false時不包括margin.
.scrollTop() | .scrollLeft:被卷走的寬高。
.offset().top/left :相對于document.
.position().top/left :相對于offsetParent.
常用的屬性:
$(window).height();--可視區(qū)高
$(window).scrollTop();--滾上去的部分
$(document).height();--整個文檔的高
滾動到底部:
$(window).scroll(function(){ var scrollTop = $(this).scrollTop(); //滾動條距離頂部的高度 var scrollHeight = $(document).height(); //當前頁面的總高度 var clientHeight = $(this).height(); //當前可視的頁面高度 if(scrollTop + clientHeight >= scrollHeight){ //滑動到底部 count++; //每次滑動count加1 alert("滾動底部了"); }});
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。