亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

整理獲取 viewport 和 element 尺寸和位置方法

dinfer / 2724人閱讀

摘要：整理獲取和尺寸和位置方法更多前端技術(shù)和知識(shí)點(diǎn)，搜索訂閱號(hào)菌訂閱視口頁(yè)面或窗口的位置和寬高獲取視口寬高下面方法是包括滾動(dòng)條的寬高，不支持滾動(dòng)條另外瀏覽器兼容差，可獲取包括工具欄的寬高頁(yè)面滾動(dòng)位置返回整個(gè)頁(yè)面的滾動(dòng)的位置，與返回的值一致，前者是

整理獲取 viewport 和 element 尺寸和位置方法 
?? 更多前端技術(shù)和知識(shí)點(diǎn)，搜索訂閱號(hào) JS 菌 訂閱
視口頁(yè)面或窗口的位置和寬高 獲取視口寬高

下面方法是包括滾動(dòng)條的寬高，不支持 IE8

window.innerWidth
window.innerHeight
width + padding + border + 滾動(dòng)條 另外 outerWidth 瀏覽器兼容差，可獲取包括工具欄的寬高
頁(yè)面滾動(dòng)位置

返回整個(gè)頁(yè)面的滾動(dòng)的位置，pageYOffset/pageXOffset 與 scrollY/scrollX 返回的值一致，前者是后者的別名，建議使用前者，不支持 IE8

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
窗口在顯示器的位置

標(biāo)準(zhǔn)瀏覽器使用的是 screenX/screenY，IE 中使用的是 screenLeft/screenTop

window.screenLeft || window.screenX
window.screenTop || window.screenY
元素幾何尺寸和位置 元素占用的空間尺寸和位置

getBoundingClientRect

使用方法 getBoundingClientRect() 返回的值見下圖：

IE 只返回 top right bottom left 四個(gè)值，如果需要 width height 則需要計(jì)算：
function getBoundingClientRect(elem) {
    let rect = elem.getBoundingClientRect()
    return {
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        left: rect.left,
        width: rect.width || rect.right - rect.left,
        height: rect.height || rect.bottom - rect.top
    }
}

clientWidth/clientHeight

返回元素不含滾動(dòng)條的尺寸，不包括邊框

document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight

如果是 document.documentElement，那么返回的是不包含滾動(dòng)條的視口尺寸

如果是 document.body，并且是在混雜模式下，那么返回的是不包含滾動(dòng)條的視口尺寸

clientLeft/clientTop

返回的是計(jì)算后的 CSS 樣式的 border-left-width/border-top-width 的值，就是邊框的寬度

offsetWidth/offsetHeight

同樣可以使用 offsetWidth/offsetHeight 來(lái)獲取元素包括滾動(dòng)條和邊框的尺寸，這個(gè)方法返回元素本身的寬高 + padding + border + 滾動(dòng)條

offsetLeft/offsetTop

相對(duì)于最近的祖先定位元素（CSS position 屬性被設(shè)置為 relative、absolute 或 fixed 的元素）的左右偏移值

offsetLeft/offsetTop 返回元素 X Y 坐標(biāo)值

計(jì)算元素的位置：

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
    };
}
元素內(nèi)容的寬高和滾動(dòng)距離

scrollWidth/scrollHeight

這個(gè)方法返回元素內(nèi)容區(qū)域的寬高 + padding + 溢出內(nèi)容尺寸

document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight

如果元素是 document.documentElement，返回的是視口滾動(dòng)區(qū)域?qū)挾群鸵暱趯挾戎休^大的那個(gè)

如果元素是 document.body，并且是在混雜模式下，那么返回的是視口滾動(dòng)區(qū)域?qū)挾群鸵暱趯挾戎休^大的那個(gè)

scrollLeft/scrollTop

這個(gè)方法返回元素滾動(dòng)條的位置

如果元素是根元素，那么返回 window.scrollY 的值

如果元素是 body，并且在混雜模式下，那么返回的是 window.scrollY 的值

因此可用于處理頁(yè)面滾動(dòng)的距離的兼容

請(qǐng)關(guān)注我的訂閱號(hào)，不定期推送有關(guān) JS 的技術(shù)文章，只談技術(shù)不談八卦

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

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

相關(guān)文章

  • css溢出機(jī)制探究

    摘要：為什么需要深入學(xué)習(xí)溢出機(jī)制在實(shí)際開發(fā)的過(guò)程中，內(nèi)容溢出是經(jīng)常見到的。溢出當(dāng)一個(gè)盒子的內(nèi)容子元素孫子元素等后裔超過(guò)盒子本身的大小的時(shí)候，就會(huì)出現(xiàn)溢出。這個(gè)時(shí)候?qū)傩詻Q定如何處理溢出。 為什么需要深入學(xué)習(xí)CSS溢出機(jī)制？ 在實(shí)際開發(fā)的過(guò)程中，內(nèi)容溢出是經(jīng)常見到的。如果不深入了解這個(gè)機(jī)制，你經(jīng)常會(huì)碰到這樣的問題：為什么這個(gè)元素沒有受到祖先元素的overflow:hidden的影響？這里出現(xiàn)的滾...

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

  • C1:DOM 元素的尺寸和位置

    摘要：元素的尺寸和位置元素的尺寸包括內(nèi)容區(qū)寬高不包括如果元素的是那么此時(shí)設(shè)置的就是該元素的也就是等于內(nèi)容區(qū)的寬高滾動(dòng)條。元素的位置使用我們可以得到元素相對(duì)于的位置。還有一種方法可以得到元素相對(duì)于最近定位的祖先元素的位置，就是使用和屬性。 DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight: 包括內(nèi)容區(qū)寬/高,padding,border,不...

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

  • C1:DOM 元素的尺寸和位置

    摘要：元素的尺寸和位置元素的尺寸包括內(nèi)容區(qū)寬高不包括如果元素的是那么此時(shí)設(shè)置的就是該元素的也就是等于內(nèi)容區(qū)的寬高滾動(dòng)條。元素的位置使用我們可以得到元素相對(duì)于的位置。還有一種方法可以得到元素相對(duì)于最近定位的祖先元素的位置，就是使用和屬性。 DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight: 包括內(nèi)容區(qū)寬/高,padding,border,不...

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

  • C1:DOM 元素的尺寸和位置

    摘要：元素的尺寸和位置元素的尺寸包括內(nèi)容區(qū)寬高不包括如果元素的是那么此時(shí)設(shè)置的就是該元素的也就是等于內(nèi)容區(qū)的寬高滾動(dòng)條。元素的位置使用我們可以得到元素相對(duì)于的位置。還有一種方法可以得到元素相對(duì)于最近定位的祖先元素的位置，就是使用和屬性。 DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight: 包括內(nèi)容區(qū)寬/高,padding,border,不...

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

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

0條評(píng)論

閱讀需要支付1元查看
<