摘要:用和獲取相關屬性網頁可見區域寬網頁可見區域高網頁可見區域寬包括邊框的寬網頁可見區域高包括邊框的高網頁正文全文寬網頁正文全文高網頁下滑的距離網頁左滑的距離屏幕分辨率的高屏幕分辨率的寬屏幕可用工作區的高屏幕可用工作區的高瀏覽器可視區域的內寬度,
用JS和JQ獲取相關屬性
JavaScript
document.body.clientWidth;//網頁可見區域寬
document.body.clientHeight;//網頁可見區域高
document.body.offsetWidth;//網頁可見區域寬(包括邊框的寬)
document.body.offsetHeight;//網頁可見區域高(包括邊框的高)
document.body.scrollWidth;//網頁正文全文寬
document.body.scrollHeight;//網頁正文全文高 document.body.scrollTop;//網頁下滑的距離
document.body.scrollLeft;//網頁左滑的距離 window.screen.height;//屏幕分辨率的高
window.screen.width;//屏幕分辨率的寬 window.screen.availHeight;//屏幕可用工作區的高
window.screen.availWidth;//屏幕可用工作區的高
window.innerWidth;//瀏覽器可視區域的內寬度,不包含瀏覽器邊框,但包含滾動條
window.innerHeight;//瀏覽器可視區域的內高度
jQuery
鑒于大家很多使用jquery, 因此這里順便把jQuery的相應方法附上
瀏覽器的一些相關屬性詳解:$(window).height();//瀏覽器當前窗口可視區域高度
$(document).height();//瀏覽器當前文檔的的高度
$(document.body).height();//瀏覽器當前窗口文檔body的高度
$(document.body).outerHeight(true);//瀏覽器當前窗口文檔body的總高度(包括border、padding、margin)
瀏覽器相關屬性表現:scrollHeight:獲取對象的滾動高度 scrollWidth:獲取對象的滾動寬度
scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離 offsetHeight:
獲取對象相對于于版面或由父坐標offsetparent屬性指定的父坐標的高度
offsetLeft:獲取對象相對于版面或由offsetparent屬性指定的父坐標的計算左側的位置
offsetTop:獲取對象相對于版面或由offsetTop屬性指定的父坐標的計算頂端位置 event.clientX:相對于文檔的水平坐標
event.clientY:相對于文檔的垂直坐標 event.offsetX:相對容器的水平坐標
event.offsetY:相對容器的垂直坐標
CSS中的margin屬性,與clientWidth、offsetWidth、clientHeight、offsetHeight均無關
offsetTop返回的是數字,而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、關于document.body和document.documentElement的區別
body是DOM對象中body的子節點,即
標簽,而documentElement是整個節點樹的根結點,即標簽。var top = document.documentElement.scrollHeight || document.body.scrollHeight
3、當想定位鼠標相對于頁面的絕對位置時,我們一般會使用如下代碼
event.clientX+document.body.scrollLeft
這時我們應該注意,可能會有鼠標定位偏離你的預想的情況發生,這是因為ie5.5之后已經不支持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; }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86880.html
摘要:移動客戶端的開發類型原生,也就是完全使用移動設備系統語言寫的客戶端,就是純,安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念,我的理解是用戶能夠看到,直接接觸到的層面都算是前端,比如IOS客戶端界面,安卓客戶端界面,網頁界面,甚至PC/MAC 桌面端軟件界面;現在最常見的說法一般是指Web前端,也就是針對于網頁端開發的工作。 Web App就是以瀏覽器作為客戶端...
摘要:移動客戶端的開發類型原生,也就是完全使用移動設備系統語言寫的客戶端,就是純,安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念,我的理解是用戶能夠看到,直接接觸到的層面都算是前端,比如IOS客戶端界面,安卓客戶端界面,網頁界面,甚至PC/MAC 桌面端軟件界面;現在最常見的說法一般是指Web前端,也就是針對于網頁端開發的工作。 Web App就是以瀏覽器作為客戶端...
摘要:移動客戶端的開發類型原生,也就是完全使用移動設備系統語言寫的客戶端,就是純,安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念,我的理解是用戶能夠看到,直接接觸到的層面都算是前端,比如IOS客戶端界面,安卓客戶端界面,網頁界面,甚至PC/MAC 桌面端軟件界面;現在最常見的說法一般是指Web前端,也就是針對于網頁端開發的工作。 Web App就是以瀏覽器作為客戶端...
閱讀 1944·2021-10-12 10:12
閱讀 3072·2019-08-30 15:44
閱讀 843·2019-08-30 15:43
閱讀 2994·2019-08-30 14:02
閱讀 2076·2019-08-30 12:54
閱讀 3496·2019-08-26 17:05
閱讀 1979·2019-08-26 13:34
閱讀 1050·2019-08-26 11:54