• 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. 剑指Offer_编程题_6

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个 ...

  2. python dom操作

    1.DOM介绍 (1)什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节 ...

  3. Leetcode 137 Single Number II 仅出现一次的数字

    原题地址https://leetcode.com/problems/single-number-ii/ 题目描述Given an array of integers, every element ap ...

  4. HTML第一耍 标题 段落 字体等标签

    1.HTML标题的使用 <!doctype html> <html> <head> <title>文本标签演示</title> </h ...

  5. maven更新项目版本

    mvn versions:set -DnewVersion=1.0.1-SNAPSHOT // 此操作会生成pom备份文件,推荐使用 mvn versions:set -DnewVersion=1.1 ...

  6. Web服务调试可用，发布之后访问出错

    今天重装了系统,然后发现之前的Web服务DataService不能用了.将其设置为启动项,运行的结果是 跟踪发现,是mysql.data.dll的版本不对.所以要找到所有版本不对的该dll,将其替换成 ...

  7. 【十三】jvm 性能调优工具之 jstack

    一.介绍 jstack是java虚拟机自带的一种堆栈跟踪工具.jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项&qu ...

  8. idea JRebe插件激活方法

    具体方法请看创始人博客及github

  9. 【LeetCode】227. Basic Calculator

    Problem: Implement a basic calculator to evaluate a simple expression string. The expression string ...

  10. Session 快速开始 通过session的attribute通信

    [web.xml] <session-config> <session-timeout>30</session-timeout> <cookie-config ...