?????? 最近在做項目中,涉及到獲取瀏覽器和元素的高寬以及相關size糙置。用的時候有些會有混淆,所以今天就來總結一下~
一.??? window對象
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth 瀏覽器視口寬度(不包括工具欄和滾動條)
window.inneHeight || document.documentElement.clientHeight || document.body.clientHeight 瀏覽器視口高度(不包括工具欄和滾動條)
window.outerWidth? 瀏覽器窗口的寬度(包含地址欄工具欄)(IE沒有提供取得當前瀏覽器窗口尺寸的屬性)
window.outerHeight 瀏覽器窗口的高度 (包含地址欄工具欄)(IE沒有提供取得當前瀏覽器窗口尺寸的屬性)
screen.width 顯示屏幕的寬度
screen.height 顯示屏幕的高度
screen.availHeight 返回顯示屏幕的高度 (除 Windows 任務欄之外)
screen.availWidth 返回顯示屏幕的寬度 (除 Windows 任務欄之外)
[轉]
頁可見區(qū)域寬: document.body.clientWidth;
網頁可見區(qū)域高: document.body.clientHeight;
網頁可見區(qū)域寬: document.body.offsetWidth?? (包含邊線的寬);
網頁可見區(qū)域高: document.body.offsetHeight (包含邊線的寬);
網頁正文全文寬: document.body.scrollWidth;
網頁正文全文高: document.body.scrollHeight;
網頁被卷去的高: document.body.scrollTop;
網頁被卷去的左: document.body.scrollLeft;
網頁正文項目組上: window.screenTop;
網頁正文項目組左: window.screenLeft;
屏幕辨別率的高: window.screen.height;
屏幕辨別率的寬: window.screen.width;
屏幕可用工作區(qū)高度: window.screen.availHeight;
二.? 元素
在網上找到這個圖。
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
element.offsetWidth,element.offsetHeight: box 的總大小。包括 border, padding, content择示。不包括 margin
element.clientWidth,element.clientHeight: box 中內容區(qū)域的大小。包括 padding, content不包括 margin, border
scrollTop:已滾動過去的高度
scrollHeight:可滾動內容的總高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
錯誤之處晒旅,還請大家多多指教~~