offset / scroll / client Left / Top

时间:2021-11-06 11:06:57

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的更多相关文章

  1. JavaScript 特效之四大家族(offset/scroll/client/event)

      三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制)   三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...

  2. 三大家族,offset,scroll,client

    1.client 1.1主要成员 1.clientWidth 获取网页可视区域宽度(两种用法)    clientHeight 获取网页可视区域高度 (两张用法) 盒子调用: 指盒子本省 浏览器调用: ...

  3. offset,scroll,client系列

    offsetHeight: 元素高,height+border+paddingoffsetWidth: 元素宽,width+border+paddingoffsetTop: 距离offsetParen ...

  4. offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

    开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...

  5. offset、client、scroll开头的属性归纳总结

    HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...

  6. DOM盒模型和位置 client offset scroll 和滚动的关系

    DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...

  7. js三大家族offset,scroll,cliennt的区别

    offset偏移(返回的是number类型) offsetLeft:返回盒子距离左边的距离 offsetTop:返回盒子距离顶部的距离 offsetHeight:返回盒子的高度,包括border,pa ...

  8. offset系列,client系列,scroll系列回顾

    一 scroll系列属性      ——滚动

  9. JS中的offset scroll event client

    一.offset 一般用来检测盒子的偏移.位移,都是只读属性,不能赋值 offsetWidth和offsetHeight表示的是:调用者盒子的宽和高,包括盒子自身的padding和border off ...

随机推荐

  1. 微信小程序之后台https域名绑定以及免费的https证书申请

    微信小程序在11月3号发布了,这是一个全新的生态,没有赶上微信公众号红利的开发者,运营者可别错过这趟车了. 但是微信的后台需要全https,之前我还不相信,后台注册了后进后台才发现,服务器配置如下图 ...

  2. 【leetcode】LRU Cache(hard)★

    Design and implement a data structure for Least Recently Used (LRU) cache. It should support the fol ...

  3. 2.Nexus更新索引

    1.手动更新1.  下载索引文件在http://repo.maven.apache.org/maven2/.index/ 中下载nexus-maven-repository-index.gznexus ...

  4. IOS学习之路--BLOCK

    /* 1.定义block变量: 返回值类型 (^block变量名) (参数类型1, 参数类型2, ....); 2.给block变量赋值 block变量名 = ^(参数类型1 参数名称1, ..... ...

  5. 基于Hadoop的大数据平台实施记——整体架构设计[转]

    http://blog.csdn.net/jacktan/article/details/9200979 大数据的热度在持续的升温,继云计算之后大数据成为又一大众所追捧的新星.我们暂不去讨论大数据到底 ...

  6. Cocos2d-x 3.x事件分发机制总结

    在2.x中处理事件需要用到委托代理(delegate),相信学过2.x的触摸事件的同学,都知道创建和移除的流程十分繁琐.而在3.x中由于加入了C++11的特性,而对事件的分发机制通过事件分发器Even ...

  7. HDU 1054 Strategic Game 最小点覆盖

     最小点覆盖概念:选取最小的点数覆盖二分图中的所有边. 最小点覆盖 = 最大匹配数. 证明:首先假设我们求的最大匹配数为m,那么最小点覆盖必然 >= m,因为仅仅是这m条边就至少需要m个点.然后 ...

  8. 设计模式之建造者模式(Builder)

    一个人活到70岁以上,都会经历这样的几个阶段:婴儿,少年,青年,中年,老年.并且每个人在各个阶段肯定是不一样的呀,我觉得可以说世界上不存在两个人在人生的这5个阶段的生活完全一样,但是活到70岁以上的人 ...

  9. 《深入理解Java虚拟机:JVM高级特性与最佳实践》【PDF】下载

    <深入理解Java虚拟机:JVM高级特性与最佳实践>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062566 内容简介 作为一位 ...

  10. for in和for of