本文参考千古壹号的git项目，并自己实践验证

方式一：通过DOM节点的style样式获取

element.style.width/height
缺点：这种方式，只能获取行内样式，不能获取内嵌的样式和外链的样式

image.png

html:

<div class="container">
            包裹
            <div class="standard-box" id="standardbox" style="width:200px;
                height:200px;
                padding:20px;
                border:10px solid green;
                margin: 20px;
                box-sizing:content-box;">
                标准盒子
            </div>
        </div>

JS:

window.onload=function(){
            let elementID = document.getElementById('standardbox');
            
            elementID.onclick = function(){
                let elementWidth = elementID.style.width;
                alert('宽度'+elementWidth + '\n高度'+ elementID.style.height);
            }
        }

方式二（通用型）

window.getComputedStyle( ).width/height

行内样式、内嵌样式，外链样式都可以读取到，谷歌、火狐、IE皆可用

image.png

html

<link rel="stylesheet" type="text/css" href="test.css"/>
        <!--test.css的内容：
        .standard-box{
                width:200px;
                height:200px;
                padding:20px;
                border:10px solid green;
                margin: 20px;
                box-sizing:content-box;
        }-->

<div class="container">
            包裹
            <div class="standard-box" id="standardbox">
                标准盒子
            </div>
</div>

js

window.onload=function(){
            let elementID = document.getElementById('standardbox');
            
            elementID.onclick = function(){
                alert('宽度'+window.getComputedStyle(elementID).width + '\n高度'+ window.getComputedStyle(elementID).height);
            }
        }

方式三（IE独有，Edge也用不了）

element.currentStyle.width

image.png

JS

window.onload=function(){
            let elementID = document.getElementById('standardbox');
            
            elementID.onclick = function(){
                alert('宽度'+elementID.currentStyle.width + '\n高度'+ elementID.currentStyle.height);
            }
        }

方式四（相对于视窗的位置）

element.getBoundingClientRect().width/height

兼容谷歌、火狐、IE、Edge

getBoundingClientRect().width获取到的其实是父级的右边距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,即父级的宽度+2padding+2border

该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；

如下图，盒模型的宽度=content:200px+padding:20px 2 + border:10px 2 =260px

image.png

image.png

css:

.standard-box{
                width:200px;
                height:200px;
                padding:20px;
                border:10px solid green;
                margin: 20px;
                box-sizing:content-box;
        }

html:

<div class="container">
            包裹
    <div class="standard-box" id="standardbox">
        标准盒子
    </div>
</div>

JS:

window.onload=function(){
            let elementID = document.getElementById('standardbox');
            
            elementID.onclick = function(){
                alert('宽度'+elementID.getBoundingClientRect().width + '\n高度'+ elementID.getBoundingClientRect().height);
            }
        }