資訊專欄INFORMATION COLUMN
摘要：用和獲取相關(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的相應方法附上
瀏覽器的一些相關(guān)屬性詳解:$(window).height();//瀏覽器當前窗口可視區(qū)域高度
$(document).height();//瀏覽器當前文檔的的高度
$(document.body).height();//瀏覽器當前窗口文檔body的高度
$(document.body).outerHeight(true);//瀏覽器當前窗口文檔body的總高度（包括border、padding、margin）
瀏覽器相關(guān)屬性表現(xiàn):scrollHeight:獲取對象的滾動高度 scrollWidth:獲取對象的滾動寬度
scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
scrollTop:設置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離 offsetHeight:
獲取對象相對于于版面或由父坐標offsetparent屬性指定的父坐標的高度
offsetLeft:獲取對象相對于版面或由offsetparent屬性指定的父坐標的計算左側(cè)的位置
offsetTop:獲取對象相對于版面或由offsetTop屬性指定的父坐標的計算頂端位置 event.clientX:相對于文檔的水平坐標
event.clientY:相對于文檔的垂直坐標 event.offsetX:相對容器的水平坐標
event.offsetY:相對容器的垂直坐標
CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān)
offsetTop返回的是數(shù)字，而style.top返回的是字符串,帶有單位
offsetTop只讀,而style.top可讀可寫
如果沒有給相應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、要獲取當前頁面的滾動條的縱坐標的位置，應該用：
document.documentElement.scrollTop
之所以不用document.body.scrollTop的原因是documentElement對應的是html標簽,而body對應的是body標簽
2、關(guān)于document.body和document.documentElement的區(qū)別
body是DOM對象中body的子節(jié)點,即
標簽，而documentElement是整個節(jié)點樹的根結(jié)點，即標簽。var top = document.documentElement.scrollHeight || document.body.scrollHeight
3、當想定位鼠標相對于頁面的絕對位置時，我們一般會使用如下代碼
event.clientX+document.body.scrollLeft
這時我們應該注意，可能會有鼠標定位偏離你的預想的情況發(fā)生，這是因為ie5.5之后已經(jīng)不支持document.body.scrollX對象了，因此為了好的兼容系那個我們應該做以下判斷。
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://www.ezyhdfw.cn/yun/86880.html
摘要：移動客戶端的開發(fā)類型原生，也就是完全使用移動設備系統(tǒng)語言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網(wǎng)頁界面，甚至PC/MAC 桌面端軟件界面；現(xiàn)在最常見的說法一般是指Web前端，也就是針對于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...
摘要：移動客戶端的開發(fā)類型原生，也就是完全使用移動設備系統(tǒng)語言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網(wǎng)頁界面，甚至PC/MAC 桌面端軟件界面；現(xiàn)在最常見的說法一般是指Web前端，也就是針對于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...
摘要：移動客戶端的開發(fā)類型原生，也就是完全使用移動設備系統(tǒng)語言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網(wǎng)頁界面，甚至PC/MAC 桌面端軟件界面；現(xiàn)在最常見的說法一般是指Web前端，也就是針對于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...
閱讀 2036·2021-10-12 10:12
閱讀 3152·2019-08-30 15:44
閱讀 908·2019-08-30 15:43
閱讀 3078·2019-08-30 14:02
閱讀 2233·2019-08-30 12:54
閱讀 3582·2019-08-26 17:05
閱讀 2075·2019-08-26 13:34
閱讀 1127·2019-08-26 11:54
