JavaScript scroll系列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: pink;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="dv">
    我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好
    帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅
    我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好
    帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我
    好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我
    好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我好帅我
</div>
<input type="button" id="bt" 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>

 

28人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册