JavaScript client系列
阿新 • • 發佈：2018-08-19
col ava ole top doc comm 高度 rip div
<!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>
JavaScript client系列