如果有两个div嵌套,像这样
<style>
body{
margin: 0;
}
#box{
width: 100px;
height: 80px;
background-color: red;
color: yellow;
margin-left: 20px;
margin-top: 30px;
padding: 20px;
border: 10px solid #000;
}
</style>
// html代码
<div id="box">123123123</div>
// js代码,获取这个div
var box = document.getElementById("box");
通过元素对象的style属性设置的样式是行内样式,所以通过style获取也是获取的行内样式,并不能获取css设置的样式值,这时候用
console.log(box.style);是没有输出的
元素对象的clientWidth属性,表示元素的宽度,相对的举一反三高度就不列了
console.log(box.clientWidth);
带边框的宽高(算上边框的宽高)
console.log(box.offsetWidth);console.log(box.offsetHeight);
获得元素相对于浏览器窗口的坐标
console.log(box.offsetLeft);console.log(box.offsetTop);
浏览器窗口的宽高(工作区,显示页面的区域)
console.log(window.innerWidth,window.innerHeight);
整个浏览器窗口的宽高
console.log(window.outerWidth,window.outerHeight);