摘要:用和獲取相關(guān)屬性網(wǎng)頁可見區(qū)域?qū)捑W(wǎng)頁可見區(qū)域高網(wǎng)頁可見區(qū)域?qū)挵ㄟ吙虻膶捑W(wǎng)頁可見區(qū)域高包括邊框的高網(wǎng)頁正文全文寬網(wǎng)頁正文全文高網(wǎng)頁下滑的距離網(wǎng)頁左滑的距離屏幕分辨率的高屏幕分辨率的寬屏幕可用工作區(qū)的高屏幕可用工作區(qū)的高瀏覽器可視區(qū)域的內(nèi)寬度,
用JS和JQ獲取相關(guān)屬性
JavaScript
document.body.clientWidth;//網(wǎng)頁可見區(qū)域?qū)?br>document.body.clientHeight;//網(wǎng)頁可見區(qū)域高
document.body.offsetWidth;//網(wǎng)頁可見區(qū)域?qū)挘òㄟ吙虻膶挘?br>document.body.offsetHeight;//網(wǎng)頁可見區(qū)域高(包括邊框的高)
document.body.scrollWidth;//網(wǎng)頁正文全文寬
document.body.scrollHeight;//網(wǎng)頁正文全文高 document.body.scrollTop;//網(wǎng)頁下滑的距離
document.body.scrollLeft;//網(wǎng)頁左滑的距離 window.screen.height;//屏幕分辨率的高
window.screen.width;//屏幕分辨率的寬 window.screen.availHeight;//屏幕可用工作區(qū)的高
window.screen.availWidth;//屏幕可用工作區(qū)的高
window.innerWidth;//瀏覽器可視區(qū)域的內(nèi)寬度,不包含瀏覽器邊框,但包含滾動條
window.innerHeight;//瀏覽器可視區(qū)域的內(nèi)高度
jQuery
鑒于大家很多使用jquery, 因此這里順便把jQuery的相應(yīng)方法附上
瀏覽器的一些相關(guān)屬性詳解:$(window).height();//瀏覽器當(dāng)前窗口可視區(qū)域高度
$(document).height();//瀏覽器當(dāng)前文檔的的高度
$(document.body).height();//瀏覽器當(dāng)前窗口文檔body的高度
$(document.body).outerHeight(true);//瀏覽器當(dāng)前窗口文檔body的總高度(包括border、padding、margin)
瀏覽器相關(guān)屬性表現(xiàn):scrollHeight:獲取對象的滾動高度 scrollWidth:獲取對象的滾動寬度
scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離 offsetHeight:
獲取對象相對于于版面或由父坐標(biāo)offsetparent屬性指定的父坐標(biāo)的高度
offsetLeft:獲取對象相對于版面或由offsetparent屬性指定的父坐標(biāo)的計算左側(cè)的位置
offsetTop:獲取對象相對于版面或由offsetTop屬性指定的父坐標(biāo)的計算頂端位置 event.clientX:相對于文檔的水平坐標(biāo)
event.clientY:相對于文檔的垂直坐標(biāo) event.offsetX:相對容器的水平坐標(biāo)
event.offsetY:相對容器的垂直坐標(biāo)
CSS中的margin屬性,與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān)
offsetTop返回的是數(shù)字,而style.top返回的是字符串,帶有單位
offsetTop只讀,而style.top可讀可寫
如果沒有給相應(yīng)html元素指定top的樣式,則style.top返回的空字符串
給top賦值時要帶上單位px,否則無效
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height+ padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
1、要獲取當(dāng)前頁面的滾動條的縱坐標(biāo)的位置,應(yīng)該用:
document.documentElement.scrollTop
之所以不用document.body.scrollTop的原因是documentElement對應(yīng)的是html標(biāo)簽,而body對應(yīng)的是body標(biāo)簽
2、關(guān)于document.body和document.documentElement的區(qū)別
body是DOM對象中body的子節(jié)點(diǎn),即
標(biāo)簽,而documentElement是整個節(jié)點(diǎn)樹的根結(jié)點(diǎn),即標(biāo)簽。var top = document.documentElement.scrollHeight || document.body.scrollHeight
3、當(dāng)想定位鼠標(biāo)相對于頁面的絕對位置時,我們一般會使用如下代碼
event.clientX+document.body.scrollLeft
這時我們應(yīng)該注意,可能會有鼠標(biāo)定位偏離你的預(yù)想的情況發(fā)生,這是因為ie5.5之后已經(jīng)不支持document.body.scrollX對象了,因此為了好的兼容系那個我們應(yīng)該做以下判斷。
if (document.body && document.body.scrollTop && document.body.scrollLeft) { top=document.body.scrollTop; left=document.body.scrollleft; } if (document .documentElement && document .documentElement.scrollTop && document .documentElement.scrollLeft) { top=document.documentElement.scrollTop; left=document.documentElement.scrollLeft; }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/86880.html
摘要:移動客戶端的開發(fā)類型原生,也就是完全使用移動設(shè)備系統(tǒng)語言寫的客戶端,就是純,安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念,我的理解是用戶能夠看到,直接接觸到的層面都算是前端,比如IOS客戶端界面,安卓客戶端界面,網(wǎng)頁界面,甚至PC/MAC 桌面端軟件界面;現(xiàn)在最常見的說法一般是指Web前端,也就是針對于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...
摘要:移動客戶端的開發(fā)類型原生,也就是完全使用移動設(shè)備系統(tǒng)語言寫的客戶端,就是純,安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念,我的理解是用戶能夠看到,直接接觸到的層面都算是前端,比如IOS客戶端界面,安卓客戶端界面,網(wǎng)頁界面,甚至PC/MAC 桌面端軟件界面;現(xiàn)在最常見的說法一般是指Web前端,也就是針對于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...
摘要:移動客戶端的開發(fā)類型原生,也就是完全使用移動設(shè)備系統(tǒng)語言寫的客戶端,就是純,安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念,我的理解是用戶能夠看到,直接接觸到的層面都算是前端,比如IOS客戶端界面,安卓客戶端界面,網(wǎng)頁界面,甚至PC/MAC 桌面端軟件界面;現(xiàn)在最常見的說法一般是指Web前端,也就是針對于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...
閱讀 1952·2021-10-12 10:12
閱讀 3081·2019-08-30 15:44
閱讀 850·2019-08-30 15:43
閱讀 3000·2019-08-30 14:02
閱讀 2085·2019-08-30 12:54
閱讀 3508·2019-08-26 17:05
閱讀 1992·2019-08-26 13:34
閱讀 1060·2019-08-26 11:54