dom的宽高 clientWidth offsetWidth scrollWidth
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div {
width: 50px;
height: 50px;
background-color: red;
padding: 10px;
border: 2px solid black;
overflow: scroll;
} */
</style>
</head>
<body>
<!-- <div style="height: 3000px;">
123132123
13212313
12313
123131232332
</div> -->
<script>
/*
clientWidth
offsetWidth
scrollWidth
添加到页面中才可以获取到的
并且图片这些加载元素无法获取 等页面生成之后才会开始加载 （异步的原因）
*/
// var div = document.querySelector('div')
// var div = document.createElement("div")
// div.style.width = "50px"
// div.style.height = "50px"
// div.style.backgroundColor = "red"
// var img = document.createElement("img");
// img.src = "../img/a.png"//异步
// document.body.appendChild(img);
// console.log( img.clientHeight )// 无法获取 异步原因
// console.log( div.clientHeight )// 无法获取
// document.body.appendChild(div);
// console.log( div.clientHeight )// 放入document中 就可以获取了
// console.log('aaa') //先打印aaa 后面加载图片 这就是异步
// 同步 上一步执行完成在执行下一步 就是同步
// console.log(getComputedStyle(div).width) //获取计算后的样式 样式的值 50px 连padding都没有的
// console.log(div.clientWidth) //数值 width + padding - 17px(滚动条的宽度) 肉眼可见的
// console.log(div.offsetWidth) //数值 width + padding + border 实际div的占位宽高 实际占位
// console.log(div.scrollWidth) //数值 实际内容宽度+padding
// scrollTop 距离容器的高度
// 旁边滚动条的 高度 是由比例的 可以计算
// 元素以外的宽高 页面宽高
// console.log( document.body.clientHeight )
// 获取的是body的宽高
// console.log( document.body.clientWidth,document.body.clientHeight)//body
// 获取的是页面的可视宽高 不会内容的撑大而变化
// console.log( document.documentElement.clientWidth,document.documentElement.clientHeight )// html
// offsetWidth 一样 offsetWidth
// console.log( document.body.clientHeight,document.body.offsetHeight,document.body.scrollHeight )
// 可视宽度（clientWidth） 内容宽度(offsetWidth)
// 1.内容高度 body的 clientWidth offsetWidth; document.body.clientWidth document.body.clientHeight
// 2.可视宽高 看html document.documentElement.clientWidth document.documentElement.clientHeight
// 3.有滚动条时 内容宽高 document.body.scrollHeight document.body.scrollWidth;
console.log( document.body.clientWidth , document.body.clientHeight )
console.log( document.documentElement.clientWidth , document.documentElement.clientHeight )
console.log( document.body.scrollWidth , document.body.scrollHeight )
</script>
</body>
</html>
标签：body,scrollWidth,console,log,clientHeight,clientWidth,div,document,offsetWidth 来源： https://blog.csdn.net/qq_44917015/article/details/111830963