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)文章

js Firefox 加入收藏夾功能代碼兼容Firefox 和 IE
最近改用Firefox后，發(fā)現(xiàn)很多網(wǎng)站的“加入收藏”鏈接點(diǎn)擊無(wú)效了，后來(lái)發(fā)現(xiàn)原來(lái)是IE瀏覽器和Firefox瀏覽器的“加入收藏夾”的寫(xiě)法是不同的。
2009-12-12
JavaScript實(shí)現(xiàn)簡(jiǎn)單購(gòu)物小表格
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單購(gòu)物小表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
優(yōu)化網(wǎng)頁(yè)之快速的呈現(xiàn)我們的網(wǎng)頁(yè)
優(yōu)化網(wǎng)頁(yè)之快速的呈現(xiàn)我們的網(wǎng)頁(yè)...
2007-06-06
layer.open的自適應(yīng)及居中及子頁(yè)面標(biāo)題的修改方法
今天小編就為大家分享一篇layer.open的自適應(yīng)及居中及子頁(yè)面標(biāo)題的修改方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
JS 組件系列之Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問(wèn)題解決方案
這篇文章主要介紹了JS 組件系列之Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問(wèn)題解決方案,需要的朋友可以參考下
2017-06-06
優(yōu)化javascript的執(zhí)行速度
這個(gè)是我在網(wǎng)上找的資料，具體的出處，我已經(jīng)記不清楚了，覺(jué)得很不錯(cuò)，就和大家分享了
2010-01-01
javascript動(dòng)畫(huà)之模擬拖拽效果篇
其實(shí)javascript本身是具有原生拖放功能的，但是由于兼容性問(wèn)題，以及功能實(shí)現(xiàn)的方式，用的不是很廣泛。javascript動(dòng)畫(huà)廣泛使用的還是模擬拖拽。本文將詳細(xì)介紹javascript的模擬拖拽，有需要的可以參考借鑒。
2016-09-09
詳解ES9的新特性之異步遍歷Async iteration
在ES6中，引入了同步iteration的概念，隨著ES8中的Async操作符的引用，是不是可以在一異步操作中進(jìn)行遍歷操作呢？今天要給大家講一講ES9中的異步遍歷的新特性Async iteration。
2021-06-06
Bootstrap基本組件學(xué)習(xí)筆記之分頁(yè)(12)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之分頁(yè),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
web網(wǎng)絡(luò)安全之跨站腳本攻擊(XSS)詳解
這篇文章主要介紹了web網(wǎng)絡(luò)安全之跨站腳本攻擊(XSS)的相關(guān)資料,跨站腳本攻擊XSS是一種常見(jiàn)的Web安全漏洞,攻擊者通過(guò)注入惡意腳本誘使用戶(hù)執(zhí)行,可能導(dǎo)致竊取敏感信息或執(zhí)行惡意操作,需要的朋友可以參考下
2025-03-03