获取盒子模型的宽高，获取元素的宽高示例

最新推荐文章于 2025-01-01 22:10:25 发布

ForMyWebFrontSide

最新推荐文章于 2025-01-01 22:10:25 发布

阅读量2.2k

点赞数 3

分类专栏： css javascript 文章标签：取得盒模型的宽高

本文链接：https://blog.youkuaiyun.com/ForMyQianDuan/article/details/80109965

版权

javascript 同时被 2 个专栏收录

111 篇文章

订阅专栏

css

29 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取盒子模型的宽高
    </title>
    <style>
        #dv1 {
            width: 100px;
            height: 100px;
            border: 2px solid red;
            padding: 2px;
            margin: 3px;
            /*box-sizing: border-box;*/
        }
    </style>
</head>
<body>
<div id="dv1"></div>
</body>
<script>
    var dv1 = document.getElementById('dv1');
    var width1 = window.getComputedStyle ? window.getComputedStyle(dv1).width : 'nothing!';
    var width2 = dv1.style.width;
    var width3 = dv1.currentStyle ? dv1.currentStyle.width : 'nothing!';
    var width4 = dv1.getBoundingClientRect().width;
    console.log('1、通用宽（内容宽），(IE9以下无效。)：', width1);
    console.log(' 2、只能取到style设置在行内的dom宽度：', width2);
    console.log(' 3、IE下使用的获取元素宽度方法： ', width3);
    console.log(' 4、真正盒子总宽，width+padding*2+border*2(IE9以下无效。)：', width4);
</script>
</html>

主要提下标准盒模型的宽度和IE盒模型的宽度。
当box-sizing: content-box；或不设置的时候。盒子模型总宽为108px = 100 + 2*2 +2*2；即width+padding*2+border*2。
而在IE盒模型下， box-sizing: border-box。这时100px就成了盒子模型的总宽度，内容宽就变小了，成了92px。