Element.clientWidth 属性对于 inline 和 (elements with no CSS 不太懂)元素返回 0，
如果不是这样的元素则以象素为单位返回元素的里部距离，它包括内边距但是不包括边框，边距，和垂直的滚动条(如果出现的话)。

var intElemClientWidth = element.clientWidth;
intElementClientWidth是element的clientWidth相对应的整数，单位为像素。clientWidth属性是只读的。
 
 
<style type="text/css">
    #box {
        height: 200px;
        width: 200px;
        padding: 50px;
        border: 10px solid red;
        overflow: scroll;
</style>
<div id="box">
</div>
</body>
<script type="text/javascript">
    var box = document.getElementById('box')
    console.log(box.clientWidth)
</script>
clientWidth = 200(宽度) + 100(内边距) - 15(垂直滚动条)
对于内联元素返回 0
 
<style type="text/css">
</style>
<span id="span">span</span>
</body>
<script type="text/javascript">
    var box = document.getElementById('span')
    console.log(box.clientWidth)
</script>
Element.clientWidth
 
                    Element.clientWidth属性对于inline和 (elements with no CSS 不太懂)元素返回 0，如果不是这样的元素则以象素为单位返回元素的里部距离，它包括内边距但是不包括边框，边距，和垂直的滚动条(如果出现的话)。语法var intElemClientWidth = element.clientWidth;intElementClientWidth是ele...
				
1.Window 对象
所有浏览器都支持 window对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window
 对象的属性之一：
window.document.getElementById("he
				
clientWidth:返回元素的可见宽度。
clientHeight:返回元素的可见高度。
这两个属性都是不带px,返回的是一个数字，可直接进行计算会获取元素宽度和高度，包括内容区和内边距.
offsetHeight：返回元素的高度。
offsetWidth：返回元素的宽度。
获取元素的整个的高度和宽度，包括内容区、内边距和边框
offsetParent：可以获取当前元素的定位父元素，会获取当前元素最近的开启了定位的父元素。如果所有的祖先元素都没有开启定位则返回body
offsetLeft：返回元素的水
				
document.documentElement.clientWidth
获取浏览器窗口文档显示区域的宽度，不包括滚动条。
document.documentElement.clientHeight
获取浏览器窗口文档显示区域的高度，不包括滚动条。
浏览器兼容性
所有浏览器解释都一样。
document.documentElement.offsetWidth
获取DOM文档的根节点html元素对象
				
clientWidth、clientHeight获取元素的可见宽度和高度，不带px，返回的是一个数字，可以直接进行计算。（包括内容区和内边距padding只读不可修改）
offsetWidth、offsetHeight获取元素的整个宽度和高度包括内容区，内边距和边框。
offsetParent可以用来获取当前元素的定位父元素，最近的开启了定位的元素，如果所有的父元素都没开启，则返回body。
 var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.bod...
是 Internet Explorer 对象模型中引入的属性。是一个只读属性，其值计算方式如下；
clientHeight = 内容高 + paddingTop + paddingBottom - 水平滚动条的高度 (如果存在)
如图：控制台选中元素时，看到的蓝色部分就是盒子内容
				
内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。
intElemClientWidth 是一个整数，表示元素的 clientWidth。clientWidth 是一个只读属性。
				
我们有时需要获得鼠标在某盒子中的位置，或者是随意移动某盒子的位置，在这些场景中我们可能经常需要用到clientWidth、offsetWidth、offsetTop啊等等。但是对于初学者来说（包括我），看到这些就头疼，因为感觉意思都相近，但作用却不同，所以今天天我就来捋一捋，搞清楚，后面好干活。好吧，废话不多说，开始吧。
先上一下示例代码，下面要用到。
HTML:       ...
```javascript
const width = renderer.domElement.clientWidth;
const height = renderer.domElement.clientHeight;
2. 更新渲染器的视口宽高
```javascript
renderer.setSize(width, height);
其中，`setSize()`方法用于更新渲染器的视口大小。需要将渲染器的宽高设置为与相机视口宽高相同，确保渲染器能够正确渲染场景。
最后，需要在渲染循环中将新的宽高传递给渲染器：
```javascript
function animate() {
  requestAnimationFrame(animate);
  // 更新渲染器视口宽高
  const width = renderer.domElement.clientWidth;
  const height = renderer.domElement.clientHeight;
  renderer.setSize(width, height);
  // 渲染场景
  renderer.render(scene, camera);