一、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. vscode中检测代码中的空白行并去除的方法【转】

    按下ctrl+h键进行正则匹配:^\s*(?=\r?$)\n 然后直接替换,再看代码发现空行已经不见了.

  2. 计算机学院大学生程序设计竞赛(2015’12)Happy Value

    Happy Value Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  3. Android 不同阶段 Logo 显示

    /********************************************************************* * Android 不同阶段 Logo 显示 * 说明: ...

  4. SPOJ:Lexicographically Smallest(并查集&排序)

    Taplu and Abhishar loved playing scrabble. One day they thought of inventing a new game using alphab ...

  5. FINDSTR 命令使用详解

    Findstr 使用正则表达式搜索文件中的文本模式. 语法 findstr [/b] [/e] [/l] [/r] [/s] [/i] [/x] [/v] [/n] [/m] [/o] [/p] [/ ...

  6. css画三角的原理

    当我们设置一个div其width与height为100px,并且设置其四边框的宽度为100px,且分别设置其颜色后,我们可以看到如下的一张图片 此时如果设置这个div的height为0的话,其他不变, ...

  7. UVa11077

    dp+置换 可以把排列分成几个循环,然后dp统计 dp[i][j]=dp[i-1][j-1]*(i-1)+dp[i-1][j],表示当前有i个元素,至少换j次,然后如果不在自己应该在的位置有i-1种情 ...

  8. HDU 5884 Sort (二分+k叉哈夫曼树)

    题意:n 个有序序列的归并排序.每次可以选择不超过 k 个序列进行合并,合并代价为这些序列的长度和.总的合并代价不能超过T, 问 k最小是多少. 析:首先二分一下这个 k .然后在给定 k 的情况下, ...

  9. JavaScript面向对象轻松入门之综合

    javascrpit面向对象之综合   这一章是对前几章的一个总结,通过一个案例来综合认识javascript面向对象的基本用法   需求: 几乎所有的web应用都需要保存数据一些到本地,那么我们就来 ...

  10. poj3617【贪心】

    题意: 给定长度为N的字符串S,要构造一个长度为N的字符串T串. 从S的头部删除一个字符,加到T的尾部 从S的尾部删除一个字符,加到T的尾部 目标是构造字典序尽可能小的字符串. 思路: 贪心,每次取小 ...