<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 200px;
background-color: pink;
overflow: auto;
}
</style>
</head>
<body>
<div >
我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好
帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅
我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好
帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我
好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我
好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我
</div>
<input type="button" value="显示效果"/>
<script src="common.js"></script>
<script>
/*
* 元素的样式是无法通过:对象.style.属性来获取的(样式在style中设置)
* offset系列：
* offsetLeft：距离左边位置的值
* offsetTop： 距离上边位置的值
* offsetWidth：元素的宽度
* offsetHeight：元素的高度
*
* scroll系列：卷曲
* scrollWidth：元素中内容实际宽度（没有边框），如果没有内容就是元素的宽
* scrollHeight：元素中内容实际的高度（没有边框），如果没有内容就是元素的高
*
* */
my$("bt").onclick = function () {
console.log("offsetHeight = " + my$("dv").offsetHeight);//div的高度
console.log("offsetWidth = " + my$("dv").offsetWidth);//div的宽度
console.log("scrollHeight = " + my$("dv").scrollHeight);//div中内容的高度,如果没有内容就是元素的高
console.log("scrollWidth = " + my$("dv").scrollWidth);//div中内容的宽度,如果没有内容就是元素的宽
};
//div的滚动事件
my$("dv").onscroll = function () {
console.log(this.scrollTop);
};
</script>
</body>
</html>