我们需要了解几个基础概念，每个HTML元素都有下列属性

offsetWidth      clientWidth     scrollWidth

offsetHeight     clientHeight    scrollHeight

offsetLeft       clientLeft      scrollLeft

offsetTop        clientTop       scrollTop

为了理解这些属性，我们需要知道HTML元素的实际内容有可能比分配用来容纳内容的盒子更大，因此可能会出现滚动条，内容区域是视口，当实际内容比视口大的时候，需要把元素的滚动条位置考虑进去。

  1. clientHeight和clientWidth用于描述元素内尺寸，是指 元素内容+内边距 大小，不包括边框（IE下实际包括）、外边距、滚动条部分
  2. offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分
  3. clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度
  4. offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离
  5. offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null

JavaScript DOM位置尺寸API的更多相关文章

  1. JavaScript DOM编程艺术第一章：JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  2. JavaScript DOM 对象

    JavaScript DOM 对象   什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...

  3. JavaScript DOM基础总结

    上个月在进行百度三面时候,面试官提问JavaScript DOM方法,我回答的有点少,前面太关注JavaScript 兼容性,框架方面,JavaScript 原生DOM基础没有记牢,心中有点遗憾.下来 ...

  4. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  5. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  6. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  7. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  8. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  9. JavaScript DOM 编程艺术（第2版）读书笔记（1）

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

随机推荐

  1. 字符集详解 ASCII码、Unicode、UTF-8 （转）

    认识字符集 对于计算机而言,它仅认识两个0和1,不管是在内存中还是外部存储设备上,我们所看到的文字.图片.视频等等“数据”在计算机中都是已二进制形式存在的.不同字符对应二进制数的规则,就是字符的编码. ...

  2. 092、部署Graylog日志系统（2019-05-16 周四）

    参考https://www.cnblogs.com/CloudMan6/p/7808708.html   Graylog 是与 ELK 可以相提并论的一款几种式日志管理方案,支持数据收集.检索.可视化 ...

  3. 25、Python之禅

    要求: 爬取网页你好,蜘蛛侠!中的Python之禅中英文版本,并且打印.   目的: 练习使用selenium爬取动态网页的信息. 练习selenium与BeautifulSoup的搭配使用.     ...

  4. java实现spark常用算子之countbykey

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaPairRDD;import org.apache.spa ...

  5. 10.css3动画--过渡动画--trasition

    Transition简写属性. Transition-property规定应用过渡的css属性的名称. . Transition-timing-function过渡效果的时间曲线,默认是ease. L ...

  6. C#判断点是否在直线上

    判断点在直线上,实际上就是判断点到直线上的垂直距离.点到直线垂直距离为0,则点在线上.当然也可以误差设置误差几个像素. 参考资料并进行修改:http://blog.sina.com.cn/s/blog ...

  7. 工具使用——使用XShell连接linux系统

    1.首先到官网取下载一个XShell安装包,根据提示安装成功. 2.打开软件,点击新建连接 3.在新建连接页面输入,主机名称.主机地址.端口号,点击确定按钮. 4.在弹出的会话窗口中,选中我们刚刚创建 ...

  8. Codeforces Round #575 (Div. 3) D1+D2. RGB Substring (easy version) D2. RGB Substring (hard version) （思维，枚举，前缀和）

    D1. RGB Substring (easy version) time limit per test2 seconds memory limit per test256 megabytes inp ...

  9. dubbo 2.8.4（dubbox）的jar包制作【添加到maven本地仓库】

    1. 下载 网址:https://github.com/hongmoshui/dubbox 2.  解压zip文件 3.  用maven编译文件 如果没有配置全局maven,就直接使用cmd命令行[进 ...

  10. Java并发编程实战 第11章 性能与可伸缩性

    关于性能 性能的衡量标准有很多,如: 服务时间,等待时间用来衡量程序的"运行速度""多快". 吞吐量,生产量用于衡量程序的"处理能力",能够 ...