ボックスモデルの幅と高さを設定し、取得JS

dom.style.width /高さ：唯一のインラインスタイルの幅と高さを取り除くこと

dom.currentStyle.width /高さ：インスタント計算のスタイルを取得しますが、唯一のIEをサポート

window.getComputedStyleが（DOM）.width：リアルタイムシステムのスタイルを取得し、他のブラウザをサポートし、より優れた互換性

dom.getBoundingClientRect（）.width /高さ：以下で、ページモデルにおけるカートリッジの絶対位置を算出します。

dom.offsetWidth / offectHeight：要素の実際のサイズを返します。

一、dom.style.width /高さ

このようにして唯一のノードスタイルタグまたは外部CSSスタイルシート・ワード内のスタイルであれば、この方法は、DOMを取得する方法はありません、すなわち、インラインスタイルDOM要素セットの幅と高さを取ります幅と高さ。

例：

BOX1 <スタイル>スタイリング、インラインスタイルの幅と高さを設定するために使用BOX2には、この例で使用されます。

だから、使用はconsole.log（のdocument.getElementById（「」）.style.width /高さ）のみBOX2幅と高さを返すことができます。

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>获取盒子宽高</ タイトル> 
    < スタイル> 
    ＃1 BOX1 { 
        幅：200pxの。高さ：200pxの。
        背景：#ddf 。
    } 
    </ スタイル> 
</ ヘッド> 
< 身体>
    DIV ID = "BOX1" >盒子一</ divの> 
    < DIV ID = "BOX2" スタイル= "幅：300ピクセル、高さ300ピクセル;背景：#faa;" >盒子二</ DIV > 
</ ボディ> 
</ HTML >

二、dom.currentStyle.width /高さ

このようにして得られたことは、ページのレンダリングの結果が完了しているいずれかの方法を意味し、インラインイェジンハオ、スタイルのタグまたは何でも、入ることができます。しかし、この方法では、IEブラウザでのみ使用することができます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取盒子宽高</title>
    <style>
    #box1{
        width:200px;height:200px;
        background: #ddf;
    }
    </style>
</head>
<body>
    <div id="box1">盒子一</div>
    <div id="box2" style="width:300px; height:300px; background:#faa;">盒子二</div>
</body>
</html>

在IE浏览器中的效果：

在360浏览器中的效果

三、window.getComputedStyle(dom).width/height

这种方式的原理和方式二是一样的，都可以在任何方式在获取页面在完成渲染之后的结果。相比dom.currentStyle.width/height方式而言，这种方式可以兼容更多的浏览器，不仅仅是IE浏览器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取盒子宽高</title>
    <style>
    #box1{
        width:201px;height:200px;
        background: #ddf;
        border:5px solid yellow;
    }
    </style>
</head>
<body>
    <div id="box1">盒子一</div>
    <div id="box2" style="width:301px; height:300px; background:#faa;border:5px solid #aff;">盒子二</div>
</body>
</html>

在Chrome浏览器中的效果

四、dom.getBoundingClientRect( ).width/height

这个方法可以获得运行后的属性。一般用于计算一个元素的绝对定位。返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

console.log(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
console.log(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
console.log(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
console.log(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离
console.log(box.getBoundingClientRect().width); //元素本身宽度加上边框之后的全部宽度
console.log(box.getBoundingClientRect().height); //元素本身高度加上边框之后的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取盒子宽高</title>
    <style>
    #box1{
        width:201px;height:200px;
        background: #ddf;
        border:5px solid yellow;
        position: relative;
        top:20px;left:40px;
    }
    </style>
</head>
<body>
    <div id="box1">盒子一</div>
</body>
<script>
    var box=document.getElementById('box1');     // 获取元素
 　　console.log(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离
　　 console.log(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离
　　 console.log(box.getBoundingClientRect().bottom);  // 元素下边距离页面上边的距离
　　 console.log(box.getBoundingClientRect().left);         // 元素左边距离页面左边的距离
　　 console.log(box.getBoundingClientRect().width);      //元素本身宽度加上边框之后的全部宽度
　　 console.log(box.getBoundingClientRect().height);    //元素本身高度加上边框之后的宽度
</script>
</html>

五、dom.offsetWidth/offectHeight

这组方法可以返回元素实际大小，包含边框，内边距和滚动条。返回元素大小，默认单位是px。如果没有设置任何CSS宽度和高度，也会在计算后得到宽度和高度。理解offsetWidth和offsetHeight设置的元素实际大小：

设置边框，输出值等于原本大小+边框大小；
设置内边距，输出值等于原本大小+内边距大小；
设置外边距 / 滚动条，输出值无变化等于原本大小；

对于元素大小的获取，一般是块级(block)元素并且以设置了CSS大小的元素较为方便。如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦，所以，建议使用的时候注意。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取盒子宽高</title>
    <style>
    #box1{
        width:201px;height:200px;
        background: #ddf;
        border:5px solid yellow;margin:40px;
    }
    </style>
</head>
<body>
    <div id="box1">盒子一</div>
</body>
<script>
    var box=document.getElementById('box1');//获取元素；
    console.log(box.offsetWidth);
    console.log(box.offsetHeight);
</script>
</html>

因为元素原本宽度和高度分别为201px和200px，所以加上两边边框的大小 10px，offsetWidth和offsetHeight输出值分别为 211 和 210。虽然设置了margin值，但是并不会对最后输出结果产生影响。

参考博客：https://www.jb51.net/article/61460.htm