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系列的更多相关文章

  1. client , offset , scroll 系列 及百度导航栏案例

    1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  2. client,offset,scroll系列

    client(客户端),offset(偏移),scroll(滚动)1.client系列 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部 ...

  3. DOM盒模型和位置 client offset scroll 和滚动的关系

    DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...

  4. client offset scroll 之间的区别

    一.client 属性 值 clientWidth 元素被设置的宽度 + padding左右内间距 clientHeight 元素被设置的高度 + padding上下内间距 clientLeft 左 ...

  5. JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 分类： JavaScript HTML+CSS 2015-05-27 16:42 635人阅读 评论(0) 收藏

    原文地址:http://caibaojian.com/js-name.html JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词 ...

  6. JS中client/offset/scroll等的宽高解析

    原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...

  7. JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  8. JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度

    Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth ...

  9. 差别client、offset、scroll系列以及event的几个距离属性

    element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + ...

  10. 区别client、offset、scroll系列以及event的几个距离属性

    element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个只读属性,它包括了: css width + p ...

随机推荐

  1. <转> win7下破解已安装的VS2008

    http://renfan.blog.51cto.com/3466724/754301 在win7系统下,已安装的VS2008维护界面是不显示序列号输入的,需要按以下步骤进行才能破解 1.点击“卸载/ ...

  2. quartz的配置文件

    quartz在运行时默认加载的是工程目录下的quartz.properties文件,如果工程目录下没有quartz.properties文件,它就会去读取quartz jar包下的quartz.pro ...

  3. MySQL数据库篇之单表查询

    主要内容: 一.单表查询的语法 二.关键字的执行优先级 三.简单查询 四.where约束 五.分组查询 group by 六.having过滤 七.查询排序 order by 八.限制查询的记录数 l ...

  4. java算法 第七届 蓝桥杯B组（题+答案） 8.四平方和

    8.四平方和  (程序设计) 四平方和定理,又称为拉格朗日定理:每个正整数都可以表示为至多4个正整数的平方和.如果把0包括进去,就正好可以表示为4个数的平方和. 比如:5 = 0^2 + 0^2 + ...

  5. JAVA中的数组对象

    代码:Student [] sd=new Student[5];//新建一个学生类的数组对象sd.        sd[0]=new Student("kj",13);//为数组对 ...

  6. 各种mac软件地址

    http://www.sdifenzhou.com/  各种软件地址

  7. Visual studio 2015/2017 opencv3.4 kineck2.0 osg realsense配置

    ----------------------------------------------包含目录-------------------------------------------------- ...

  8. MYSQL中GROUP BY的细节及SELECT语句顺序

    一.GROUP BY语句的细节 我们知道,在sql中,GROUP BY语句主要用来给数据分组,以便能对每个组进行聚集计算,但是GROUP BY也有一些限制需要知道: 1. GROUP BY字句可以包含 ...

  9. windows下 apache,php,mysql，phpadmin集成化安装

    1.appserv 直接下载安装, 2.linux环境下下载安装LAMP

  10. loadrunner12-添加集合点

    1.首先添加集合点之前要插入事务,集合点和事务通常是一起使用的,单独使用集合点,基本上可以说是没有意义的. 2.在开始事务之前 ,插入一个“集合点”,那么在多用户执行时,就可以将用户请求停下来,直到用 ...