快捷導(dǎo)航

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

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

這篇文章主要給大家介紹了關(guān)于js獲取dom元素寬高的幾種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(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

這種?法，也是有?定局限性，不過(guò)我們?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ì)算元素的絕對(duì)位置，根據(jù)視窗左上?的點(diǎn)來(lái)算的?？梢阅玫剿膫€(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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