欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

最新評(píng)論