一、client系列

  clientWidth/clientHeight    是我们设置的宽和高加上内边距(没有边框)

  clientLeft/clientTop  就是我们设置的边框值

二、offset系列

  offsetWidth/offsetHeight  是我们设置的宽和高加上内边距,加上边框

  offsetLeft/offsetTop  是元素外边距离父级内边距相对于父级,这个父级由定位position:absolute;

  offsetParent  返回这个元素的父级元素

  offsetTop 参照由父级身上的position:absolute/fixed,如果父级元素身上没有就逐层向上查找,直到body

  offset往往和我们做元素的运动有关;

  注意:1、offset必须和position配合使用,往往这个值还必须是absolute;

     2、offset由初始值,在标准浏览器下是8,低版本是0;

     3、 var   t=setInterval (function()){

        aa . style . left=+"px"

    }

三、scroll系列

  scrollWidth/scrollHeight  就是我们设置的宽和高加内边距(内容没有溢出的前提,如果超出了范围就按内容而定)

  scrollLeft/scrollTop  滚动条卷走的高度

四、

  获取浏览器的body的属性是有兼容的

  var  dd=document . body || document . documentElement;

  获取body的整个文档的高

  document . scrollHeight || document . documentElement . scrollHeight;

  获取屏幕的高(浏览器的可视区)

  document . body || document . documentElement . clientHeight

client系列、offset系列、scroll系列的更多相关文章

  1. 前端 ---client、offset、scroll系列

    client.offset.scroll系列   1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta c ...

  2. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  3. 4.client、offset、scroll系列

    client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域 ...

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

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

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

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

  6. client、offset、scroll系列

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  7. python 全栈开发,Day54(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...

  8. 16-client、offset、scroll系列

    1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  9. 16-----client、offset、scroll 系列

    1.client 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  10. 20190430-screen、client、offset、scroll等JS中各种宽度距离

    参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left

随机推荐

  1. MapReduce Join的使用

    一.Map端Join 可连接两个都非常大的数据集之间可使用map端连接,数据在到达map端之前就执行连接操作. 需满足: 两个要连接的数据集都先划分成相同数量的分区,相同的key要保证在同一分区中(每 ...

  2. alsa和oss声音系统比较

    OSS(Open Sound System) OSS的含义为,Open Sound System,是unix平台上一个统一的音频接口.以前,每个Unix厂商都会提供一个自己专有的API,用来处理音频. ...

  3. POJ 3750 小孩报数问题 (线性表思想 约瑟夫问题 数组模拟运算的 没用循环链表,控制好下标的指向就很容易了)

    小孩报数问题 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10423   Accepted: 4824 Descripti ...

  4. BestCoder5 1001 Poor Hanamichi(hdu 4956) 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4956(它放在题库后面的格式有一点点问题啦,所以就把它粘下来,方便读者观看) 题目意思:给出一个范围 [ ...

  5. html5--6-52 动画效果-过渡

    html5--6-52 动画效果-过渡 实例 @charset="UTF-8"; div{ width: 300px; height: 150px; margin: 30px; f ...

  6. 嵌入式Linux学习方法——给那些彷徨者(下)

    上一章解决了嵌入式Linux的“学什么”问题,这一章则具体来说一下“怎么学”. 只要做好以下3点: 1.学习顺序.学习任何东西都应该由浅入深,不能一口吃下一个大胖子,得循序渐进.很多刚开始想学习Lin ...

  7. 【转】创建和使用ANDROID LIBRARY工程

    原文网址:http://www.cnblogs.com/Greenwood/archive/2011/06/19/2084499.html 摘要: 创建library供多个工程共享代码.资源是非常常见 ...

  8. 洛谷P1247取火柴游戏

    题目:https://www.luogu.org/problemnew/show/P1247 可以知道必败局面为n[1]^n[2]^...^n[k]=x=0: 而若x不等于0,则一定可以取一次使其变为 ...

  9. [转]Python+Selenium之expected_conditions:各种判断(上)

    原文地址: https://www.jianshu.com/p/f3189f1951cc 其他类似文章: https://www.cnblogs.com/yuuwee/p/6635652.html h ...

  10. .NETFramework:Cache

    ylbtech-.NETFramework:Cache 1.返回顶部 1. #region 程序集 System.Web, Version=4.0.0.0, Culture=neutral, Publ ...