js获取盒模型宽和高的方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js获取盒模型宽和高的方法</title>
        <style>
            body{padding: 0;}
            #box{width: 100px;height: 100px;background: lightcoral;}
        </style>
    </head>
    <body>
        <div id="box"></div>
        <p>特点：
        方法一：只能拿到内联样式的宽和高；
        方法二：页面渲染后dom的实际宽高，只适用于ie浏览器；
        方法三：在方法二的基础上适用范围更广，适合多种浏览器，与方法二的原理类似；
        方法四：适用场所：计算一个元素的绝对位置，相对于视窗左上角左顶点位置；可以获取到
        dom四个参数：left,top,width,height
        </p>
    </body>
    <script>
        var oBox=document.getElementById("box");
        // 方法一：oBox.style.width/height
        // 方法二：oBox.currentStyle.width/height
        // 方法三：window.getComputedStyle(oBox).width/height
        // 方法四：oBox.getBoundingClientRect().width/height        
    </script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容