<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> offsetWidth和offsetHeight </title>
<!-- offsetWidth：
获取的是盒子最终的宽
offsetHeight:
获取的是盒子最终的高
获取的是数值，可以直接参与数学运算
获取的是不带单位的数值类型的宽高
以上属性只能获取，无法修改 -->
<style>
.box {
width: 100px;
height: 100px;
background-color: rgb(255, 15, 15);
border: 10px solid rgb(20, 13, 13);
padding: 10px ;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.getElementsByClassName('box')[0];
console.log(box.offsetWidth,box.offsetHeight); // 140,140
</script>
</body>
</html>
