<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script src="common.js"></script> <script> /* * * offset系列:获取元素的宽,高,left,top, offsetParent * offsetWidth:元素的宽,有边框 * offsetHeight:元素的高,有边框 * offsetLeft:元素距离左边位置的值 * offsetTop:元素距离上面位置的值 * * scroll系列:卷曲出去的值 * scrollLeft:向左卷曲出去的距离 * scrollTop:向上卷曲出去的距离 * scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,元素自身的宽),没有边框 * scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框 * * * client系列:可视区域 * clientWidth:可视区域的宽(没有边框),边框内部的宽度 * clientHeight:可视区域的高(没有边框),边框内部的高度 * clientLeft:左边边框的宽度 *clientTop :上面的边框的宽度 * */ </script> <style> div{ width: 200px; height: 210px; border: 20px solid red; border-left-width: 50px; } </style> </head> <body> <div id="dv"></div> <script> // console.log(my$("dv").clientWidth); // console.log(my$("dv").clientHeight); // console.log(my$("dv").clientLeft); console.log(my$("dv").clientTop); </script> </body> </html>