成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于JS、JQ獲取可視區(qū)域的高度、寬度以及屏幕分辨率的那些事

or0fun / 1477人閱讀

摘要:用和獲取相關(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)方法附上

$(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)屬性詳解:

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)

瀏覽器相關(guān)屬性表現(xiàn):

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

相關(guān)實例

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)簽。
即document.body.clientHeight獲取到的是body的高度,而document.documentElement.clientHeight獲取到的是 整個html的高度,然而當(dāng)文檔處于怪癖模式下時,我們使用document.documentElement.scrollTop獲取到屬性的值是為0的,而在w3c標(biāo)準(zhǔn)文檔模式下,document.body.scrollTop的值是為0的,因此為了好的兼容性,我們可以這樣寫:

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

相關(guān)文章

  • Web移動開發(fā)基本概念

    摘要:移動客戶端的開發(fā)類型原生,也就是完全使用移動設(shè)備系統(tǒng)語言寫的客戶端,就是純,安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念,我的理解是用戶能夠看到,直接接觸到的層面都算是前端,比如IOS客戶端界面,安卓客戶端界面,網(wǎng)頁界面,甚至PC/MAC 桌面端軟件界面;現(xiàn)在最常見的說法一般是指Web前端,也就是針對于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...

    vvpale 評論0 收藏0
  • Web移動開發(fā)基本概念

    摘要:移動客戶端的開發(fā)類型原生,也就是完全使用移動設(shè)備系統(tǒng)語言寫的客戶端,就是純,安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念,我的理解是用戶能夠看到,直接接觸到的層面都算是前端,比如IOS客戶端界面,安卓客戶端界面,網(wǎng)頁界面,甚至PC/MAC 桌面端軟件界面;現(xiàn)在最常見的說法一般是指Web前端,也就是針對于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...

    ivan_qhz 評論0 收藏0
  • Web移動開發(fā)基本概念

    摘要:移動客戶端的開發(fā)類型原生,也就是完全使用移動設(shè)備系統(tǒng)語言寫的客戶端,就是純,安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念,我的理解是用戶能夠看到,直接接觸到的層面都算是前端,比如IOS客戶端界面,安卓客戶端界面,網(wǎng)頁界面,甚至PC/MAC 桌面端軟件界面;現(xiàn)在最常見的說法一般是指Web前端,也就是針對于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...

    xiaoqibTn 評論0 收藏0
  • 移動端適配

    摘要:在端,的一般對應(yīng)著電腦屏幕的個物理像素,但在移動端,的等于幾個物理像素是和屏幕像素密度有關(guān)的。也被稱為視網(wǎng)膜顯示屏。設(shè)備像素比設(shè)備像素比簡稱為,物理像素與設(shè)備獨(dú)立像素的比例。 在說具體內(nèi)容之前,我們必須了解幾個概念,就是:Retina屏、物理像素、設(shè)備獨(dú)立像素、設(shè)備像素比在CSS中我們一般使用px作為單位,需要注意的是,CSS樣式里面的px和物理像素并不是相等的。CSS中的像素只是一個...

    plokmju88 評論0 收藏0
  • 移動端適配

    摘要:在端,的一般對應(yīng)著電腦屏幕的個物理像素,但在移動端,的等于幾個物理像素是和屏幕像素密度有關(guān)的。也被稱為視網(wǎng)膜顯示屏。設(shè)備像素比設(shè)備像素比簡稱為,物理像素與設(shè)備獨(dú)立像素的比例。 在說具體內(nèi)容之前,我們必須了解幾個概念,就是:Retina屏、物理像素、設(shè)備獨(dú)立像素、設(shè)備像素比在CSS中我們一般使用px作為單位,需要注意的是,CSS樣式里面的px和物理像素并不是相等的。CSS中的像素只是一個...

    Maxiye 評論0 收藏0

發(fā)表評論

0條評論

or0fun

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<