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

資訊專欄INFORMATION COLUMN

獲取屏幕寬高width(),outerWidth,innerWidth,clientWidth的區(qū)別

woshicixide / 2455人閱讀

摘要：基本介紹與與獲得的是屏幕可視區(qū)域的寬高，不包括滾動(dòng)條與工具條?？v向滾動(dòng)條寬度橫向滾動(dòng)條高度與與獲得的是加上工具條與滾動(dòng)條窗口的寬度與高度。兼容性和屬性與和屬性以及以下不支持。

基本介紹 $(window).width()與$(window).height()

$(window).width()與$(window).height()：獲得的是屏幕可視區(qū)域的寬高，不包括滾動(dòng)條與工具條。

$(window).width() = width + padding
$(window).height() = height + padding
document.documentElement.clientWidth與document.documentElement.clientHeight

document.documentElement.clientWidth與document.documentElement.clientHeight：獲得的是屏幕可視區(qū)域的寬高，不包括滾動(dòng)條與工具條，跟jquery的(window).width()與(window).height()獲得的結(jié)果是一樣的。

document.documentElement.clientWidth = width + padding
document.documentElement.clientHeight = height + padding
window.innerWidth與window.innerHeight

window.innerWidth與window.innerHeight：獲得的是可視區(qū)域的寬高，但是window.innerWidth寬度包含了縱向滾動(dòng)條的寬度，window.innerHeight高度包含了橫向滾動(dòng)條的高度(IE8以及低版本瀏覽器不支持)。

window.innerWidth = width + padding + border + 縱向滾動(dòng)條寬度
window.innerHeight = height + padding + border + 橫向滾動(dòng)條高度
window.outerWidth與window.outerHeight

window.outerWidth與window.outerHeight：獲得的是加上工具條與滾動(dòng)條窗口的寬度與高度。

window.outerWidth = width + padding + border + 縱向滾動(dòng)條寬度
window.outerHeight = height + padding + border + 橫向滾動(dòng)條高度 + 工具條高度
document.body.clientWidth與document.body.clientHeight

document.body.clientWidth與document.body.clientHeight：document.body.clientWidth獲得的也是可視區(qū)域的寬度，但是document.body.clientHeight獲得的是body內(nèi)容的高度，如果內(nèi)容只有200px，那么這個(gè)高度也是200px,如果想通過它得到屏幕可視區(qū)域的寬高，需要樣式設(shè)置，如下：

body {
height: 100%;
overflow: hidden;
}
body, div, p, ul {
margin: 0;
padding: 0;
}

最關(guān)鍵的是：body的height:100%影響document.body.clientHeight的值。
body的margin:0,padding:0影響document.body.clientWidth的值。

offsetWidth & offsetHeight

返回本身的寬高 + padding + border + 滾動(dòng)條

offsetLeft & offsetTop

所有HTML元素?fù)碛衞ffsetLeft和offsetTop屬性來返回元素的X和Y坐標(biāo)

1.相對(duì)于已定位元素的后代元素和一些其他元素（表格單元），這些屬性返回的坐標(biāo)是相對(duì)于祖先元素
2.一般元素，則是相對(duì)于文檔，返回的是文檔坐標(biāo)


offsetParent屬性指定這些屬性所相對(duì)的父元素，如果offsetParent為null，則這些屬性都是文檔坐標(biāo)


//用offsetLeft和offsetTop來計(jì)算e的位置
function getElementPosition(e){
    var x = 0,y = 0;
    while(e != null) {
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }
    return {
        x : x,
        y : y
    };
}
scrollWidth & scrollHeight

這兩個(gè)屬性是元素的內(nèi)容區(qū)域加上內(nèi)邊距，在加上任何溢出內(nèi)容的尺寸.

因此，如果沒有溢出時(shí)，這些屬性與clientWidth和clientHeight是相等的。

scrollLeft & scrollTop

指定的是元素的滾動(dòng)條的位置

scrollLeft和scrollTop都是可寫的屬性，通過設(shè)置它們來讓元素中的內(nèi)容滾動(dòng)。

兼容性

1.window innerWidth 和 innerHeight 屬性與outerWidth和outerHeight屬性IE8以及以下不支持。

2.測試瀏覽器IE，火狐，谷歌，360瀏覽器，Safari都支持document.documentElement.clientWidth與document.documentElement.clientHeight。

結(jié)論

獲取屏幕的可視區(qū)域的寬高可使用jquery的方式獲得，也可以使用原生js獲得，即：

document.documentElement.clientWidth與document.documentElement.clientHeight

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87374.html

相關(guān)文章

  • JavaScript獲取瀏覽器、元素、屏幕的寬高尺寸

    摘要：一瀏覽器視口的寬高瀏覽器視口寬度單位像素，如果存在滾動(dòng)條則包括它。二瀏覽器的寬高整個(gè)瀏覽器窗口的高度單位像素，包括側(cè)邊欄如果存在窗口鑲邊和窗口調(diào)正邊框。語法示例六屏幕的寬高屏幕分辨率寬高。 showImg(https://segmentfault.com/img/remote/1460000014929763); 版權(quán)聲明 轉(zhuǎn)載請(qǐng)告知并注明來源作者 作者：唐金健 網(wǎng)絡(luò)昵稱：御焱 ...

    Amio 評(píng)論0 收藏0

  • JS、jQuery各種寬高屬性

    摘要：下各種寬高和下寬高分為掛載在對(duì)象和對(duì)象下的寬高屬性，先說下和的區(qū)別對(duì)象表示瀏覽器中打開的窗口，對(duì)象可以省略，比如可以簡寫為對(duì)象是對(duì)象的一部分，那么我們可以寫成，瀏覽器的文檔成為對(duì)象下的寬高屬性瀏覽器窗口內(nèi)部寬度瀏覽器窗口內(nèi)部高度瀏覽器窗口外 JS下各種寬高 Window和Document:JS下寬高分為掛載在Window對(duì)象和Document對(duì)象下的寬高屬性，先說下Window和Do...

    CntChen 評(píng)論0 收藏0

  • JS動(dòng)態(tài)解析瀏覽器和網(wǎng)頁的各種寬高屬性

    摘要：獲得各種寬高的屬性還有公式網(wǎng)頁可見區(qū)域高滾動(dòng)條寬度測試的文字網(wǎng)頁可見區(qū)域?qū)挐L動(dòng)條寬度測試的文字的總高度滾動(dòng)條寬度邊框?qū)挾葴y試的文字的總寬度滾動(dòng)條寬度邊框?qū)挾葴y試的文字的解釋元素內(nèi)容高度的度量，包括由于溢出導(dǎo)致的視圖中不可見內(nèi)容滾動(dòng)總高度 獲得各種寬高的屬性還有公式 body { padding: 50px; height: 500px; ...

    Luosunce 評(píng)論0 收藏0

  • JS動(dòng)態(tài)解析瀏覽器和網(wǎng)頁的各種寬高屬性

    摘要：獲得各種寬高的屬性還有公式網(wǎng)頁可見區(qū)域高滾動(dòng)條寬度測試的文字網(wǎng)頁可見區(qū)域?qū)挐L動(dòng)條寬度測試的文字的總高度滾動(dòng)條寬度邊框?qū)挾葴y試的文字的總寬度滾動(dòng)條寬度邊框?qū)挾葴y試的文字的解釋元素內(nèi)容高度的度量，包括由于溢出導(dǎo)致的視圖中不可見內(nèi)容滾動(dòng)總高度 獲得各種寬高的屬性還有公式 body { padding: 50px; height: 500px; ...

    XiNGRZ 評(píng)論0 收藏0

  • JS動(dòng)態(tài)解析瀏覽器和網(wǎng)頁的各種寬高屬性

    摘要：獲得各種寬高的屬性還有公式網(wǎng)頁可見區(qū)域高滾動(dòng)條寬度測試的文字網(wǎng)頁可見區(qū)域?qū)挐L動(dòng)條寬度測試的文字的總高度滾動(dòng)條寬度邊框?qū)挾葴y試的文字的總寬度滾動(dòng)條寬度邊框?qū)挾葴y試的文字的解釋元素內(nèi)容高度的度量，包括由于溢出導(dǎo)致的視圖中不可見內(nèi)容滾動(dòng)總高度 獲得各種寬高的屬性還有公式 body { padding: 50px; height: 500px; ...

    galois 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<