元素的尺寸和位置

如果有两个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);