<div id="dv"></div>
<!-- 已在style标签里设置div宽高各100px -->
<script>
//在style标签里面的样式属性无法获取,但是在style属性中设置的样式可以获取
console.log(document.getElementById("dv").style.width);//为空---无法获取
//所以引出了offset系列,总共有四个属性如下:
//1.可以通过offsetWidth获取元素的宽
console.log(document.getElementById("dv").offsetWidth);//100
//2.可以通过offsetHeight获取元素的高
console.log(document.getElementById("dv").offsetHeight);//100
//3.可以通过offsetLeft获取元素距离左边的值
//注意:
//没有脱离文档流,值=父级元素的margin和padding和border+自己的margin
//脱离文档流,值=自己的left+自己的margin
console.log(document.getElementById("dv").offsetLeft);//8---没有清除边距
//4.可以通过offsetLeft获取元素距离上边的值
console.log(document.getElementById("dv").offsetTop);//8---没有清除边距
//注意:
//没有脱离文档流,值=父级元素的margin和padding和border+自己的margin
//脱离文档流,值=自己的left+自己的margin
</script>