关于滚动条的操作
原文鏈接：https://www.cnblogs.com/wangtian0711/p/7027853.html
?
clientWidth：獲取對象的內容可視區域的寬度，即clientWidth=width+padding，不包括滾動條。
clientHeight：獲取對象的內容可視區域的高度，即clientHeight=height+padding，不包括滾動條。
scrollWidth：獲取對象內容的實際寬度，即對象的滾動寬度。
scrollHeight：獲取對象內容的實際高度，即對象的滾動高度。
offsetWidth：獲取對象的寬度，即offsetWidth=width+padding+scrollbar（滾動條）+border。也可以寫成offsetWidth=clientWidth+scrollbar（滾動條）+border。
offsetHeight：獲取對象的寬度，即offsetHeight=height+padding+scrollbar（滾動條）+border。也可以寫成offsetHeight=clientHeight+scrollbar（滾動條）+border。
clientTop：獲取對象的上邊框的寬度。
clientLeft：獲取對象的左邊框的寬度。
scrollTop：設置或獲取對象最頂端和對象內容的最頂端之間的距離。
scrollLeft：設置或獲取對象最左端和對象內容的最左端之間的距離。
offsetTop：獲取對象相對于版面或由offsetParent屬性指定的父坐標的頂部位置。
offsetLeft：獲取對象相對于版面或由offsetParent屬性指定的父坐標的左側位置。
offsetParent：指的是最近的定位祖先元素。如果沒有祖先元素是定位的話，會指向body元素。
td的offsetParent是TABLE，不管table是否有定位屬性。td里面的元素的offsetParent為第一個定位的parents元素，如果沒有定位元素呢，分為三種：
在IE6和IE7中對offsetParent解釋有個小bug，當祖先元素都不是定位元素且本身是定位元素的時候返回document.documentElement，其他情況返回document.body!!
?
offsetTop、offsetLeft
（1）當對象的offsetParent屬性指向的是body時，offsetLeft和offsetTop指的是對象的邊框（不包括邊框）到頁面邊緣的距離。在FireFox中，會減去body的邊框的寬度。
（2）當對象的offsetParent屬性指向的是最近的定位祖先元素時，offsetLeft和offsetTop指的是對象的邊框（不包括邊框）到最近的定位祖先元素的邊框（不包括邊框）的距離。在IE中，會將最近的定位祖先元素的邊框寬度算在內。
示例代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"/><title>鬼眼邪神的博客</title><meta name="author" content="鬼眼邪神"/><meta name="description" content="鬼眼邪神的博客，http://cyg7561.blog.163.com/"/><style>* {margin:0;padding:0;}body {margin-left:30px;border:5px solid #000;background:yellow;height:350px;}.d {float:left;position:relative;margin:20px;padding:20px; width:200px;height:200px;border:20px solid #000;background:red;overflow:auto;}.con {float:left;width:400px;height:80px;margin-left:25px;border:10px solid blue;background:green;}.zi {float:left;margin-top:20px;width:200px;height:300px;}</style><script>(function(){window.οnlοad=function(){var d=document.getElementById("d");var con=document.getElementById("con");var bo=document.getElementById("bo");var zi=document.getElementById('zi');zi.innerHTML="d.clientWidth="+d.clientWidth+"<br/>"+"d.clientHeight="+d.clientHeight+"<br/>"+"d.scrollWidth="+d.scrollWidth+"<br/>"+"d.scrollHeight="+d.scrollHeight+"<br/>"+"d.offsetWidth="+d.offsetWidth+"<br/>"+"d.offsetHeight="+d.offsetHeight+"<br/>"+"d.clientTop="+d.clientTop+"<br/>"+"d.clientLeft="+d.clientLeft+"<br/>"+"d.scrollTop="+d.scrollTop+"<br/>"+"d.scrollLeft="+d.scrollLeft+"<br/>"+"d.offsetTop="+d.offsetTop+"<br/>"+"d.offsetLeft="+d.offsetLeft+"<br/>"+"con.offsetTop="+con.offsetTop+"<br/>"+"con.offsetLeft="+con.offsetLeft+"<br/>";}})();</script></head><body id="bo"><div class="d" id="d"><div class="con" id="con"><a href="http://cyg7561.blog.163.com/" title="鬼眼邪神的博客">鬼眼邪神的博客</a></div></div><div class="zi" id="zi"></div></body> </html>在Chrome中的顯示效果：
?
?
轉載于:https://www.cnblogs.com/wanlibingfeng/p/9838421.html
總結
- 上一篇： spring boot 项目打成war包
- 下一篇： js校验文本框只能输入数字（包括小数）