通过JS获取盒模型对应的宽和高，有以下几种方法：

1. dom.style.width/height

这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。

2. dom.currentStyle.width/height

这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。

但这种方式只有IE浏览器支持，在其他的浏览器中会报错的

3. window.getComputedStyle(dom).width/height

这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。

4. dom.getBoundingClientRect().width/height

这种方式是根据元素在视窗中的绝对位置来获取宽高的

5.dom.offsetWidth/offsetHeight

最常用的，也是兼容最好的。这种方式获取的宽高包含border,且不带单位

下面是几种方式的代码实现

<style>
    #container2{
        width: 200px;
        height: 200px;
        border:1px solid red;
        padding-top:20px;
    }
</style>
<body>
    <div id="container1" style="width:100px;height:100px;border:1px solid yellow;">
        内联样式盒子
    </div>
    <div id="container2">非内联样式盒子</div>
</body>
<script>
   var con1 = document.getElementById('container1');
   console.log(con1.style.height); // 100px 只有内联样式中才能获取到 
   console.log(window.getComputedStyle(con1).height); //100px 
   console.log(con1.offsetWidth);//102 注意没有单位

    var con2 = document.getElementById('container2');
   // alert(con2.currentStyle.height); //ie中才生效，否则控制台报错
   console.log(window.getComputedStyle(con2).height); // 200px;
   console.log(con2.offsetWidth); // 202  注意没有单位
</script>
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生