16-client、offset、scroll系列
阿新 • • 發佈：2018-11-10
大小 elements 圖片 har height auto ntb cli gif
1、client系列
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; position: absolute; border: 10px solid red; /*margin: 10px 0px 0px 0px;*/ padding: 80px; } </style> </head> <body> <div class="box"> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div> </body> <script type="text/javascript"> /* * clientTop 內容區域到邊框頂部的距離 ，說白了，就是邊框的高度 * clientLeft 內容區域到邊框左部的距離，說白了就是邊框的亂度 * clientWidth 內容區域+左右padding 可視寬度 * clientHeight 內容區域+ 上下padding 可視高度 **/ var oBox = document.getElementsByClassName(‘box‘)[0]; console.log(oBox.clientTop); console.log(oBox.clientLeft); console.log(oBox.clientWidth); console.log(oBox.clientHeight)； </script> </html>
2.屏幕的可視區域
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> // 屏幕的可視區域 window.onload = function(){ // document.documentElement 獲取的是html標簽 console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); // 窗口大小發生變化時，會調用此方法 window.onresize = function(){ console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); } } </script> </html>
3.offset系列
代碼如下，註釋都挺清楚的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } </style> </head> <body style="height: 2000px"> <div> <div class="wrap" style=" width: 300px;height: 300px;background-color: green"> <div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;"> </div> </div> </div> </body> <script type="text/javascript"> window.onload = function(){ var box = document.getElementById(‘box‘) /* offsetWidth占位寬 內容+padding+border offsetHeight占位高 * offsetTop: 如果盒子沒有設置定位 到body的頂部的距離,如果盒子設置定位，那麽是以父輩為基準的top值 * offsetLeft： 如果盒子沒有設置定位 到body的左部的距離，如果盒子設置定位，那麽是以父輩為基準的left值 * */ console.log(box.offsetTop) console.log(box.offsetLeft) console.log(box.offsetWidth) console.log(box.offsetHeight) } </script> </html>
4.scroll系列
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} </style> </head> <body style="width: 2000px;height: 2000px;"> <div style="height: 200px;background-color: red;"></div> <div style="height: 200px;background-color: green;"></div> <div style="height: 200px;background-color: yellow;"></div> <div style="height: 200px;background-color: blue;"></div> <div style="height: 200px;background-color: gray;"></div> <div id = ‘scroll‘ style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;"> <p>路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城 路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城 路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城 路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城 </p> </div> </body> <script type="text/javascript"> window.onload = function(){ //實施監聽滾動事件 window.onscroll = function(){ // console.log(1111) // console.log(‘上‘+document.documentElement.scrollTop) // console.log(‘左‘+document.documentElement.scrollLeft) // console.log(‘寬‘+document.documentElement.scrollWidth) // console.log(‘高‘+document.documentElement.scrollHeight) } var s = document.getElementById(‘scroll‘); s.onscroll = function(){ // scrollHeight : 內容的高度+padding 不包含邊框 console.log(‘上‘+s.scrollTop) console.log(‘左‘+s.scrollLeft) console.log(‘寬‘+s.scrollWidth) console.log(‘高‘+s.scrollHeight) } } </script> </html>
16-client、offset、scroll系列