4.client、offset、scroll系列
阿新 • • 發佈：2019-01-16
overflow scrip tex rap 包含 偏移 wid UNC ack
client、offset、scroll系列
他們的作用主要與計算盒模型、盒子的偏移量和滾動有關
clientTop 內容區域到邊框頂部的距離 ，說白了，就是邊框的高度
clientLeft 內容區域到邊框左部的距離，說白了就是邊框的亂度
clientWidth 內容區域+左右padding 可視寬度
clientHeight 內容區域+ 上下padding 可視高度
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>
屏幕的可視區域
<!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>
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>
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;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></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>4.client、offset、scroll系列