JavaScript高级程序设计34.pdf
元素大小
偏移量
offsetHeight：元素在垂直空间上占用的大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
offsetWidth：元素在水平空间上占用的大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
其中offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中，offsetParent属性不一定与parentNode的值相等，它是与包含元素最近的具有大小的元素
对于简单的CSS布局页面（未使用表格和内嵌框架布局），不断的使offsetTop与offsetParent、offsetLeft与offsetParent相加可以测量到整个元素的偏移量
客户区大小
客户区大小指的是元素内容及其内边距所占据的空间大小，clientWidth属性是内容区宽度加上左右内边距宽度，clientHeight属性是内容区高度加上上下内边距高度
偏移量与客户区大小都是只读的，每次访问都要重新计算，频繁访问会影响性能
滚动大小
滚动大小指的是包含滚动内容的元素的大小，有4个属性：
scrollHeight：在没有滚动条的情况下，元素内容的总高度。
scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
scrollLeft：被隐藏在内容区域左侧的像素数，设置这个属性可以改变元素的滚动位置。
scrollTop：被隐藏在内容区域上方的像素数，设置这个属性可以改变元素的滚动位置。
在有滚动条的情况下，页面元素的总高度和总宽度是document.documentElement.scrollHeight和document.documentElement.scrollWidth。
对于不包含滚动条的页面而言
scrollHeight和scrollWidth与clientHeight和clientWidth之间的关系并不十分清晰，在基于document.documentElement查看这些属性会在不同浏览器之间发现一些不一致问题：
Firefox中两组属性始终相等，大小等于文档内容区域的实际尺寸，而非视口尺寸
Opera、Safari 3.1及更高版本、Chrome中这两组属性是有差别的，其中scrollHeight和scrollWidth等于视口大小， 而clientHeight和clientWidth等于文档内容区域的大小
IE（标准模式）两组属性并不相等，其中scrollHeight和scrollWidth等于文档内容区域的大小， 而clientHeight和clientWidth等于视口大小，（与第二条正相反）
在跨浏览器情况下，确定文档的总高度必须取得scrollHeight/clientHeight与scrollWidth/clientWidth的最大值Math.max()
确定元素大小
有一个getBoundingClientRect()方法，这个方法会返回一个矩形对象，包含4个属性：left、top、right和bottom，这些属性给出了元素在页面中相对于视口的位置，但是浏览器的实现会稍有不同，IE8及之前版本认为文档左上角坐标是(2,2),其他浏览器包括IE9正确地把(0,0)作为起点坐标
最新文章
- [TED] New video technology that reveals an objects hidden properties
- 使用javax.persistence注解配置PO对象
- MySQL表分区
- php动态获取函数参数
- PHP中的魔术变量
- CSS媒体查询，CSS根据不同的分辨率显示不同的样式
- lintcode :最大子数组
- 线性模型（2）：Linear Regression
- ThinkPHP函数详解：A方法
- UITableView的简单应用介绍
- Memcached源码分析——hash
- 微信訪问页面，莫名其妙刷新两次，火狐、谷歌、ie无问题
- Webpack 2 视频教程 008 - WDS 端口号等配置相关
- C# 通过smtp服务器进行邮件发送 MailHelper
- vue技术解析六之生命周期函数
- Confluence 6 匿名访问远程 API
- C# ConcurrentDictionary实现
- Java 第二次测试总结
- nodejs(四)file System模块 解决Cross device link错误 EXDEV
- Task 6.2冲刺会议四 /2015-5-17