首頁 > web前端 > js教程 > js中常用取得視窗尺寸的屬性有哪些

js中常用取得視窗尺寸的屬性有哪些

一个新手
發布: 2017-09-08 09:08:42
原創
1073 人瀏覽過

window.innerHeight(innerWidth):表示可見區域的高度(寬度),如果底部(右側)有滾動條,會把底部(右側)滾動條的高度(寬度)計算進去,此方法適用於標準瀏覽器及IE9+

document.documentElement.clientHeight(clientWidth):表示可見區域的高度(寬度),不會把捲軸的高度寬度計算進去,此方法適用於標準瀏覽器及低版本IE標準模式

document.documentElement.offsetHeight(offsetWidth):首先offsetWidth獲得的值與clientWidth一樣,而offsetHeight獲得的是整個文件的高度。

注意:
個人認為上面的documentElement不代表body。當一個element有border時,element.offsetHeight包含border的值,而element.clientHeight不包含border的寬度。

document.documentElement.scrollHeight(scrollWidth):取得網頁文字全文高和寬,包含邊線寬度。

document.body.clientHeight(clientWidth):首先clientWidth得到的值等於document.documentElement.offsetWidth剪下body邊線寬度,而clientHeight獲得的是整個body的高度減去邊線寬度。

document.body.offsetHeight(offsetWidth):獲得的值等於document.body.clientHeight(clientWidth)加上body的邊線(border)寬度,即這兩個值取到到的包含邊線寬度。

document.body.scrollHeight(scrollWidth):取得網頁文字全文高和寬,包含邊線寬度。

document.body.scrollTop(scrollLeft):瀏覽器視窗頂部與文件頂部之間的距離(瀏覽器視窗與文件左側之間的距離),也就是捲軸滾動的距離。

window.pageYOffset(pageXOffset):瀏覽器視窗頂部與文件頂部之間的距離(瀏覽器視窗與文件左側之間的距離),也就是滾動條捲動的距離。

window.screen.height(width):螢幕解析度的高(寬)。

window.screen.availHeight(availWidth):螢幕可用工作區高(寬)。

下面我們來解釋一下offsetTop、clientTop、scrollTop分別代表什麼:

offsetTop:距離上方或上層控制項的位置,整數,單位像素。

clientTop:元素的內容區距離元素邊緣的距離,即元素的邊線寬度。

scrollTop:元素視窗頂部與元素頂部之間的距離,即元素內部捲軸滾動的距離。

以上是js中常用取得視窗尺寸的屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板