client系列属性 · JavaScript

## client 和大小位置相关的属性. offset获取的是包括边框和padding的. ![](https://box.kancloud.cn/065f14a486c0a7f296964a76f052f9f7_510x448.png) ``` <style> body { margin: 0; } #box { width: 100px; height: 100px; margin: 50px; background-color: pink; border: 10px solid yellow; padding: 10px; } </style> </head> <body> <div id="box"></div> <script> var box = document.getElementById('box'); //clientLeft是border-lift的宽度(边框宽度) console.log(box.clientLeft); //clientLeft是border-top的宽度 console.log(box.clientTop); //获取大小(元素宽度+padding,不包括边框) console.log(box.clientWidth); console.log(box.clientHeight); </script> ``` ![](https://box.kancloud.cn/3013e578a532cc29a33f57ccde64f33a_857x491.png)