getBoundingClientRect介紹

dreamtecher 發布于2019-08-23 12:34 / 364人閱讀

摘要：用于獲取元素相對與瀏覽器視口的位置由于已經是標準，所以不用擔心兼容，不過在下還是有所區別元素頂部相對于視口頂部的距離元素底部相對于視口頂部的距離元素左邊相對于視口左邊的距離元素右邊相對于視口左邊的距離元素高度元素寬度兼容寫法

getBoundingClientRect用于獲取元素相對與瀏覽器視口的位置

由于getBoundingClientRect()已經是w3c標準，所以不用擔心兼容，不過在ie下還是有所區別

{
    top: "元素頂部相對于視口頂部的距離",
    bottom: "元素底部相對于視口頂部的距離",
    left: "元素左邊相對于視口左邊的距離",
    right: "元素右邊相對于視口左邊的距離",
    height: "元素高度",
    width: "元素寬度"
}

// 兼容寫法
function getClientReat(client) {
    const { top, bottom, left, right, height, width } = client.getBoundingClientRect()
    return {
        top,
        bottom,
        left,
        right,
        height: height || bottom - top,
        width:    width || right - left
    }
}

云服務器 GPU云服務器自我介紹平臺介紹相關介紹指令介紹

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98743.html

原生 JS 獲取元素的尺寸和位置

摘要：如何獲取元素的真實尺寸呢通過下，介紹。這個函數主要提供給我們元素和寬度在內的一系列值仍然不要妄想通過獲得，加上原先的，就可以減去和的值獲得元素的真實尺寸。關于元素的尺寸和位置，這原本是 CSS 干的事，但更多的時候需要用 JavaScript 來獲取這些參數，比如一個很好的例子 js 實現的圖片瀑布流。 showImg(https://segmentfault.com/img/bVG...

simon_chen 2019-08-22 10:47 評論0 收藏0
【前端詞典】5 種滾動吸頂實現方式的比較[性能升級版]

摘要：用于獲得當前元素到定位父級頂部的距離偏移值。后來在項目中總會遇到滾動吸頂的效果需要實現，現在我將我知道的種滾動吸頂實現方式做詳細介紹。有兼容性問題，在微信瀏覽器某些版本中的值會為，于是乎也就有了第三種方案的兼容性寫法。修改版預覽這篇文章是三天前寫就的，有大佬給我提了一些修改意見，我覺得這個意見確實中肯。所以就有了這個升級的修改版本。代碼同步更新到 GitHub 了。修改內容如下：添加...

happyfish 2019-05-23 17:31 評論0 收藏0
手把手教你擼個vue2.0彈窗組件

摘要：組件結構同組件結構通過方法獲取元素的大小及其相對于視口的位置，之后對提示信息進行定位。可以用來進行一些復雜帶校驗的彈窗信息展示，也可以只用于簡單信息的展示。可以通過屬性來顯示任意標題，通過屬性來修改顯示區域的寬度。手把手教你擼個vue2.0彈窗組件在開始之前需要了解一下開發vue插件的前置知識，推薦先看一下vue官網的插件介紹預覽地址 http://haogewudi.me/k...

mrli2016 2019-08-20 18:36 評論0 收藏0
手把手教你擼個vue2.0彈窗組件

摘要：組件結構同組件結構通過方法獲取元素的大小及其相對于視口的位置，之后對提示信息進行定位。可以用來進行一些復雜帶校驗的彈窗信息展示，也可以只用于簡單信息的展示。可以通過屬性來顯示任意標題，通過屬性來修改顯示區域的寬度。手把手教你擼個vue2.0彈窗組件在開始之前需要了解一下開發vue插件的前置知識，推薦先看一下vue官網的插件介紹預覽地址 http://haogewudi.me/k...

taoszu 2019-08-29 13:07 評論0 收藏0