1.offsetHeight / Width (只读)
offsetHeight:表示该元素在垂直方向占用的空间大小,包含元素的高度+上边框高度+下边框高度
offsetWidth:表示该元素在水平方向占用的空间大小,包含元素的宽度+左边框宽度+右边框宽度
2.clientHeight / clientWidth (只读)
clientHeight:元素内容区的高度+元素内边距的高度
clientWidth:元素内容区的宽度+元素内边距的宽度
clientWidth = width + padding
offsetWidth = width + padding + border = client + border
注:该元素未设置:box-sizing:border-box
3.scrollHeight / scrollWidth
无滚动条的情况下,与client相似,但不同浏览器有不同的差别
在滚动条存在的情况下,等于client + 滚动条所蜷缩的高度或宽度
总结:
在确定文档的总高度时,必须取得scrollWidth / clientWidth 和 scrollHeight / clientHeight 中的最大值,才能保证跨浏览器的环境下得到精确的结果
var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight); var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
注意:在混杂模式下的IE,需要用document.body代替document.documentElement
4.scrollTop / scrollLeft
获取滚动条滚动的距离
5.offsetLeft / offsetTop (只读,并且没有单位)
offsetLeft :元素的左外边框至包含元素的左内边框之间的像素距离
offsetTop : 元素的上外边框至包含元素的上内边框之间的像素距离
只能通过style.left / top来修改
offset / scroll / client Left / Top的更多相关文章
-
JavaScript 特效之四大家族(offset/scroll/client/event)
三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制) 三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...
-
三大家族,offset,scroll,client
1.client 1.1主要成员 1.clientWidth 获取网页可视区域宽度(两种用法) clientHeight 获取网页可视区域高度 (两张用法) 盒子调用: 指盒子本省 浏览器调用: ...
-
offset,scroll,client系列
offsetHeight: 元素高,height+border+paddingoffsetWidth: 元素宽,width+border+paddingoffsetTop: 距离offsetParen ...
-
offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()
开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...
-
offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
-
DOM盒模型和位置 client offset scroll 和滚动的关系
DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...
-
js三大家族offset,scroll,cliennt的区别
offset偏移(返回的是number类型) offsetLeft:返回盒子距离左边的距离 offsetTop:返回盒子距离顶部的距离 offsetHeight:返回盒子的高度,包括border,pa ...
-
offset系列,client系列,scroll系列回顾
一 scroll系列属性 ——滚动
-
JS中的offset scroll event client
一.offset 一般用来检测盒子的偏移.位移,都是只读属性,不能赋值 offsetWidth和offsetHeight表示的是:调用者盒子的宽和高,包括盒子自身的padding和border off ...
随机推荐
-
微信小程序之后台https域名绑定以及免费的https证书申请
微信小程序在11月3号发布了,这是一个全新的生态,没有赶上微信公众号红利的开发者,运营者可别错过这趟车了. 但是微信的后台需要全https,之前我还不相信,后台注册了后进后台才发现,服务器配置如下图 ...
-
【leetcode】LRU Cache(hard)★
Design and implement a data structure for Least Recently Used (LRU) cache. It should support the fol ...
-
2.Nexus更新索引
1.手动更新1. 下载索引文件在http://repo.maven.apache.org/maven2/.index/ 中下载nexus-maven-repository-index.gznexus ...
-
IOS学习之路--BLOCK
/* 1.定义block变量: 返回值类型 (^block变量名) (参数类型1, 参数类型2, ....); 2.给block变量赋值 block变量名 = ^(参数类型1 参数名称1, ..... ...
-
基于Hadoop的大数据平台实施记——整体架构设计[转]
http://blog.csdn.net/jacktan/article/details/9200979 大数据的热度在持续的升温,继云计算之后大数据成为又一大众所追捧的新星.我们暂不去讨论大数据到底 ...
-
Cocos2d-x 3.x事件分发机制总结
在2.x中处理事件需要用到委托代理(delegate),相信学过2.x的触摸事件的同学,都知道创建和移除的流程十分繁琐.而在3.x中由于加入了C++11的特性,而对事件的分发机制通过事件分发器Even ...
-
HDU 1054 Strategic Game 最小点覆盖
最小点覆盖概念:选取最小的点数覆盖二分图中的所有边. 最小点覆盖 = 最大匹配数. 证明:首先假设我们求的最大匹配数为m,那么最小点覆盖必然 >= m,因为仅仅是这m条边就至少需要m个点.然后 ...
-
设计模式之建造者模式(Builder)
一个人活到70岁以上,都会经历这样的几个阶段:婴儿,少年,青年,中年,老年.并且每个人在各个阶段肯定是不一样的呀,我觉得可以说世界上不存在两个人在人生的这5个阶段的生活完全一样,但是活到70岁以上的人 ...
-
《深入理解Java虚拟机:JVM高级特性与最佳实践》【PDF】下载
<深入理解Java虚拟机:JVM高级特性与最佳实践>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062566 内容简介 作为一位 ...
- for in和for of