BOM——瀏覽器屏幕信息

一、屏幕的寬高

screen.width: 屏幕的寬度,以像素計(jì);
screen.availWidth: 屏幕的可用寬度,以像素計(jì);
screen.height: 屏幕的高度;
screen.availHieght: 屏幕可用高度,不包括屏幕底部任務(wù)欄等。

二、HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 獲取對(duì)象的滾動(dòng)高度。
scrollLeft: 設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
scrollTop: 設(shè)置或獲取位于對(duì)象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
scrollWidth: 獲取對(duì)象的滾動(dòng)寬度

offsetHeight: 獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度
offsetLeft: 獲取對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置
offsetTop: 獲取對(duì)象相對(duì)于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置

event.clientX 相對(duì)文檔的水平座標(biāo)
event.clientY 相對(duì)文檔的垂直座標(biāo)
event.offsetX 相對(duì)容器的水平坐標(biāo)
event.offsetY 相對(duì)容器的垂直坐標(biāo)

document.documentElement.scrollTop 垂直方向滾動(dòng)的值

event.clientX+document.documentElement.scrollTop 相對(duì)文檔的水平座標(biāo)+垂直方向滾動(dòng)的量

三、這里是JavaScript中建造遷移轉(zhuǎn)變代碼的常用屬性

頁可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁可見區(qū)域高: document.body.clientHeight;
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包含邊線的寬);
網(wǎng)頁可見區(qū)域高: document.body.offsetHeight (包含邊線的寬);
網(wǎng)頁正文全文寬: document.body.scrollWidth;
網(wǎng)頁正文全文高: document.body.scrollHeight;
網(wǎng)頁被卷去的高: document.body.scrollTop;
網(wǎng)頁被卷去的左: document.body.scrollLeft;
網(wǎng)頁正文項(xiàng)目組上: window.screenTop;
網(wǎng)頁正文項(xiàng)目組左: window.screenLeft;
屏幕辨別率的高: window.screen.height;
屏幕辨別率的寬: window.screen.width;
屏幕可用工作區(qū)高度: window.screen.availHeight;

四、screenX,clientX,pageX,offsetX,pageXoffset的區(qū)別

1、event.screenX、event.screenY
鼠標(biāo)相對(duì)于用戶顯示器屏幕左上角的X,Y坐標(biāo)。標(biāo)準(zhǔn)事件和IE事件都定義了這2個(gè)屬性

2、event.clientX、event.clientY
鼠標(biāo)相對(duì)于瀏覽器可視區(qū)域的X,Y坐標(biāo)(將參照點(diǎn)改成了瀏覽器內(nèi)容區(qū)域的左上角),可視區(qū)域不包括工具欄和滾動(dòng)條。IE事件和標(biāo)準(zhǔn)事件都定義了這2個(gè)屬性

3、event.pageX、event.pageY
類似于event.clientX、event.clientY,但它們使用的是文檔坐標(biāo)而非窗口坐標(biāo)。這2個(gè)屬性不是標(biāo)準(zhǔn)屬性,但得到了廣泛支持。IE事件中沒有這2個(gè)屬性。

4、event.offsetX、event.offsetY
這兩個(gè)屬性是IE特有的,鼠標(biāo)相對(duì)于“觸發(fā)事件的元素”的位置(鼠標(biāo)想對(duì)于事件源元素的X,Y坐標(biāo))。

5、window.pageXOffset
整數(shù)只讀屬性,表示X軸滾動(dòng)條向右滾動(dòng)過的像素?cái)?shù)(表示文檔向右滾動(dòng)過的像素?cái)?shù))。IE不支持該屬性,使用body元素的scrollLeft屬性替代。

6、window.pageYoffset
整數(shù)只讀屬性,表示Y軸滾動(dòng)條向下滾動(dòng)過的像素?cái)?shù)(表示文檔向下滾動(dòng)過的像素?cái)?shù))。IE不支持該屬性,使用body元素的scrollTop屬性替代

image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容