js獲取瀏覽器的各種屬性
網(wǎng)頁可見區(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)頁正文部分上: window.screenTop;
網(wǎng)頁正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的寬: window.screen.width;
屏幕可用工作區(qū)高度: window.screen.availHeight;
屏幕可用工作區(qū)寬度:window.screen.availWidth;
scrollHeight: 獲取對象的滾動(dòng)高度。
scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
scrollWidth:獲取對象的滾動(dòng)寬度
offsetHeight:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置
event.clientX 相對文檔的水平座標(biāo)
event.clientY 相對文檔的垂直座標(biāo)
event.offsetX 相對容器的水平坐標(biāo)
event.offsetY 相對容器的垂直坐標(biāo)
document.documentElement.scrollTop 垂直方向滾動(dòng)的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標(biāo)+垂直方向滾動(dòng)的量
要獲取當(dāng)前頁面的滾動(dòng)條縱坐標(biāo)位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 對應(yīng)的是 html 標(biāo)簽,而 body 對應(yīng)的是 body 標(biāo)簽
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
【JS+CSS3】實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果的示例代碼
下面小編就為大家?guī)硪黄綣S+CSS3】實(shí)現(xiàn)帶預(yù)覽圖幻燈片效果的示例代碼。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家。給大家一個(gè)參考2016-03-03js實(shí)現(xiàn)精確到秒的日期選擇器完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)精確到秒的日期選擇器,以完整實(shí)例形式分析了JavaScript日期選擇器的實(shí)現(xiàn)步驟與相關(guān)技巧,涉及JavaScript針對時(shí)間與日期的相關(guān)運(yùn)算,需要的朋友可以參考下2016-04-04JS+XML 省份和城市之間的聯(lián)動(dòng)實(shí)現(xiàn)代碼
用JS來操作一個(gè)XML文檔來實(shí)現(xiàn)一個(gè)簡單的表單聯(lián)動(dòng)2009-10-10JS實(shí)現(xiàn)的新聞列表自動(dòng)滾動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的新聞列表自動(dòng)滾動(dòng)效果,涉及javascript基于時(shí)間函數(shù)的頁面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2019-01-01微信小程序?qū)崿F(xiàn)手機(jī)驗(yàn)證碼登錄
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手機(jī)驗(yàn)證碼登錄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05微信小程序中使用echarts方法(全網(wǎng)最詳細(xì)教程!)
現(xiàn)在越來越多的項(xiàng)目都在使用可視化的功能,那么使用echarts實(shí)現(xiàn)是一種不錯(cuò)的選擇,下面這篇文章主要給大家介紹了關(guān)于小程序中使用echarts的方法,本文介紹的方法應(yīng)該是全網(wǎng)最詳細(xì)教程,需要的朋友可以參考下2023-06-06JavaScript實(shí)現(xiàn)頁面高亮操作提示和蒙板
這篇文章主要介紹了JavaScript實(shí)現(xiàn)頁面高亮操作提示和蒙板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01淺談webpack devtool里的7種SourceMap模式
這篇文章主要介紹了淺談webpack devtool里的7種SourceMap模式,主要介紹了這7種模式的使用和打包編譯后的結(jié)果的不同,非常具有實(shí)用價(jià)值,有興趣的可以了解一下2019-01-01