• 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: ;

            margin: ;

        }

        .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>

屏幕的可视区域

<!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: ;

                margin: ;

            }

        </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: ;margin: ;}

        </style>

    </head>

    <body style="width: 2000px;height: 2000px;">

        <div style="height: 200px;background-color: red;"></div>

        <div style="height: 200px;background-color: green;"></div>

        <div style="height: 200px;background-color: yellow;"></div>

        <div style="height: 200px;background-color: blue;"></div>

        <div style="height: 200px;background-color: gray;"></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>

定时器

  • setTimeout()

  • setInterval()

在js中有两种定时器：

  • 一次性定时器：setTimeout()
  • 周期性循环定时器：setInterval()

setTimeout()

只在指定的时间后执行一次

/定时器 异步运行

function hello(){

alert("hello");

}

//使用方法名字执行方法

var t1 = window.setTimeout(hello,);

var t2 = window.setTimeout("hello()",);//使用字符串执行方法

window.clearTimeout(t1);//去掉定时器

setInterval()

在指定时间为周期循环执行

/实时刷新  时间单位为毫秒

setInterval('refreshQuery()',);

/* 刷新查询 */

function refreshQuery(){

  console.log('每8秒调一次')

}

对于这两个方法，需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout

JavaScript-client、offset、scroll、定时器的更多相关文章

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

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

  2. 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.名词 ...

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

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

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

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

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

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

  6. client,offset,scroll系列

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

  7. client offset scroll 之间的区别

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

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

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

  9. JavaScript offset、client、scroll家族

    offsetParent <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  10. offset、client、scroll开头的属性归纳总结

    HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...

随机推荐

  1. SpringBoot项目部署在同一个tomcat容器报错

    在一个Tomcat容器中部署了两个springboot的应用,在启动时发现一直都是第一个启动的项目能启动成功,第二个项目启动报错,错误信息如下: 2018-01-30 15:49:27.810 ERR ...

  2. ServerU FTP服务器无法上传中文名文件怎么办

    erverU是一款非常流行的FTP服务器.最新版本的默认是utf-8编码,对中文支持不够友好,容易发生无法上传本地文件名称包含中文的文件. 工具/原料   server-u 方法/步骤     进入S ...

  3. 用go实现一个redis-cli

    转载文章:https://my.oschina.net/liangwt/blog/2231557?origin= 代码样例:https://github.com/liangwt/redis-cli

  4. 基于jieba,TfidfVectorizer,LogisticRegression进行搜狐新闻文本分类

    一.简介 此文是对利用jieba,word2vec,LR进行搜狐新闻文本分类的准确性的提升,数据集和分词过程一样,这里就不在叙述,读者可参考前面的处理过程 经过jieba分词,产生24000条分词结果 ...

  5. Web API中给领域模型添加媒体类型支持

    一.媒体类型 媒体类型(也称为MIME类型)标识一段数据的格式.在HTTP中,媒体类型描述了消息体的格式.媒体类型由两个字符串组成,一个类型和一个子类型.例如:text / html: image/ ...

  6. ant design环境搭建过程中遇到的问题--Windows-dva-cli

    基础的此处略去,nodejs和npm是前提. 1.官网介绍的是脚手架工具是antd-init,但是又建议真实项目中用dva-cli,所以博主就直接装的是dva-cli,这里主要是简单介绍下博主在Win ...

  7. spring+springmvc+ibatis整合注解方式实例【转】

    源自-----> http://shaohan126448.iteye.com/blog/2033563 (1)web.xml文件(Tomcat使用) 服务器根据配置内容初始化spring框架, ...

  8. bzoj千题计划324：bzoj5249: [2018多省省队联测]IIIDX（线段树）

    https://www.lydsy.com/JudgeOnline/problem.php?id=5249 把树建出来 如果所有的d互不相同,后续遍历即可 现在有的d相同 将d从小到大排序,考虑如何将 ...

  9. Java9+版本中，Interface的内容

    使用接口的注意事项: 1.接口没有静态代码块或者构造方法 2.一个类的父类是唯一的,但是一个类可以同时实现多个接口(区别) 3.如果实现类实现多个接口有重名的抽象方法,那么实现类只需要覆盖重写一个即可 ...

  10. VS下个人认为比较实用的插件

    懒得打字了,直接贴图