快捷導(dǎo)航

js獲取dom元素寬高的幾種方法

更新時(shí)間：2023年08月05日 09:33:08 作者：Eric?Coper

這篇文章主要給大家介紹了關(guān)于js獲取dom元素寬高的幾種方法,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

① dom.style.width / height

這種?法，有?定局限性，只能取內(nèi)聯(lián)樣式的寬?。

   <div id="id" style="height: 100px"></div>
    <script>
      var d = document.getElementById('id').style.height
      console.log(d)
    </script>

② dom.currentStyle.width / height

這種?法，也是有?定局限性，不過我們?nèi)N常?css樣式都能獲取。但是只?持 IE ，其它瀏覽器不?持

③ window.getComputedStyle(dom).width / height

        var d = document.getElementById('id')
     console.log( window.getComputedStyle(d).height)

?持所有瀏覽器，兼容性好

④ dom.getBoundingClientRect().width / height

這種?法，?般?于計(jì)算元素的絕對位置，根據(jù)視窗左上?的點(diǎn)來算的?？梢阅玫剿膫€(gè)元素值： left 、 top 、 width 、 height

  <style>
    #id{
        height: 100px;
        width: 100px;
        margin-left: 20px;
        margin-top: 20px;
    }
  </style>
<body>
   <div id="id"></div>
    <script>
        // 只支持內(nèi)聯(lián)樣式
      // var d = document.getElementById('id').style.height
      // console.log(d)
        //都支持，兼容性好
     //    var d = document.getElementById('id')
     // console.log( window.getComputedStyle(d).height)
        var d = document.getElementById('id')
        console.log(d.getBoundingClientRect())
    </script>
</body>

總結(jié)

到此這篇關(guān)于js獲取dom元素寬高的幾種方法的文章就介紹到這了,更多相關(guān)js獲取dom元素寬高內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

簡介alert()與console.log()的不同
alert（）和console.log()在程序中經(jīng)常會用到，大家知道他們的區(qū)別嗎，接下來，通過本文給大家介紹alert()與console.log()的不同，需要的朋友可以參考下
2015-08-08
微信小程序自定義可滾動的彈出框
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義可滾動的彈出框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
Layui?table.render的使用示例詳解
Layui框架的table.render方法是用于渲染表格的核心功能,通過配置對象定義表格樣式、列和數(shù)據(jù)源,cols數(shù)組中的每個(gè)對象通過field屬性與數(shù)據(jù)源綁定,指定要顯示的數(shù)據(jù)字段,本文給大家介紹Layui?table.render的使用,感興趣的朋友一起看看吧
2024-09-09
詳解基于Vue cli生成的Vue項(xiàng)目的webpack4升級
這篇文章主要介紹了詳解基于Vue cli生成的Vue項(xiàng)目的webpack4升級，本文將詳細(xì)介紹從webpack3到webpack4的升級過程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
JavaScript獲取當(dāng)前頁面上的指定對象示例代碼
這篇文章主要介紹了JavaScript獲取當(dāng)前頁面上指定對象的方法,需要的朋友可以參考下
2014-02-02
three.js 如何制作魔方
這篇文章主要介紹了three.js 如何制作魔方，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
微信小程序webview與h5通過postMessage實(shí)現(xiàn)實(shí)時(shí)通訊的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序webview與h5通過postMessage實(shí)現(xiàn)實(shí)時(shí)通訊的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
前端實(shí)現(xiàn)json動畫詳細(xì)過程(附帶示例)
這篇文章主要介紹了如何使用Lottie制作動畫,包括創(chuàng)建動畫文件.json、實(shí)現(xiàn)效果、在Git倉庫中保存和共享、運(yùn)行動畫以及在動畫天堂下載和顯示JSON動畫,文中通過代碼及圖文介紹的非常詳細(xì),需要的朋友可以參考下
2025-02-02
JS基于VML技術(shù)實(shí)現(xiàn)的五角星禮花效果代碼
這篇文章主要介紹了JS基于VML技術(shù)實(shí)現(xiàn)的五角星禮花效果代碼,涉及JavaScript數(shù)學(xué)運(yùn)算與頁面元素動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下
2015-10-10
JS函數(shù)this的用法實(shí)例分析
這篇文章主要介紹了JS函數(shù)this的用法,實(shí)例分析了javascript中this的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下
2015-02-02