/*1.复习:
1.offset家族:获取元素自身的真实宽高和位置(a.获取number类型 b.只能获取不能设置)
* offsetWidth/Height:获取元素自身真实的宽高(width + border + padding)
* offsetParent: 获取元素最近的定位父级
* offfsetLeft/Top:获取元素自身的左/上外边框与定位父级的左/上内边框的距离
2.scroll家族:获取元素内容的真实宽高
scrollWidth/Height:获取元素内容的真实宽高
scrollLeft/Top:获取左/上滚动出去的距离
3.滚动条事件: onscroll
*/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
<style>
.one {
width: 200px;
height: 200px;
border: 1px solid #000;
/*设置auto可以添加滚动条,如果此时div没有设置宽高,就会变成和内容一样大小*/
overflow: auto;
}
img {
vertical-align: top;
/*width: 400px;*/
/*height: 400px;*/
}
</style>
</head>
<body>
<div class="one" id="box">
<img src="1.jpg" alt=""/>
</div>
</body>
<script>
/*1.复习offset家族:获取元素自身的真实宽高和位置(a.获取number类型 b.只能获取不能设置)
* offsetWidth/Height:获取元素自身真实的宽高(width + border + padding)
* offsetParent: 获取元素最近的定位父级
* offfsetLeft/Top:获取元素自身的左/上外边框与定位父级的左/上内边框的距离
2.scroll家族:获取元素内容的真实宽高
scrollWidth/Height:获取元素内容的真实宽高(width + padding )
scrollLeft/Top:获取左/上滚动出去的距离
3.滚动条事件: onscroll
*/
var box = document.getElementById('box');
//1.offset家族
//获取元素自身的真实宽高 PS:自身
console.log ( box.offsetWidth, box.offsetHeight );//202 202 width(200) + border(1) * 2
//2.scroll家族
//获取元素内容的真实宽高 PS:内容
console.log ( box.scrollWidth, box.scrollHeight );//200 200
//3.给box注册一个滚动条事件
box.onscroll = function ( ) {
console.log ( "有人动了滚动条" );
//获取元素滚动出去的距离
console.log ( box.scrollLeft, box.scrollTop );
}
</script>
</html>