JavaScript-client、offset、scroll、定时器

client
offset
scroll

client、offset、scroll系列

他们的作用主要与计算盒模型，盒子的偏移量和滚动有关

clientTop 内容区域到边框顶部的距离， 说白了， 就是边框的高度
clientLeft 内容区域到边框左部的距离， 说白了， 就是边框的宽度
clientWidth 内容区域+左右padding        可视宽度
clientHeight 内容区域+上下padding       可视高度

client演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 10px solid red;
            padding: 80px;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        专业丰富的课程体系，博学多闻的实力讲师以及风趣生动的课堂，在路飞，不是灌输知识，而是点燃你的学习火焰。专业丰富的课程体系，博学多闻的实力讲师以及风趣生动的课堂，在路飞，不是灌输知识，而是点燃你的学习火焰。专业丰富的课程体系，博学多闻的实力讲师以及风趣生动的课堂，在路飞，不是灌输知识，而是点燃你的学习火焰。专业丰富的课程体系，博学多闻的实力讲师以及风趣生动的课堂，在路飞，不是灌输知识，而是点燃你的学习火焰。
    </div>

</body>
<script type="text/javascript">
    var oBox = document.getElementById("box");
    console.log(oBox.clientTop);
    console.log(oBox.clientLeft);
    console.log(oBox.clientWidth);
    console.log(oBox.clientHeight);
</script>
</html>

View Code