1.   offset系列:
    1. offsetLeft:获取元素距离最左边的距离,自身的margin包括在内,不包括自身的border
    2. offsetTop:获取元素距离最上边的距离,自身的margin包括在内,不包括自身的border
    3. offsetWidth:获取元素的宽度,包括border及以内,不包括margin
    4. offsetHeight:获取元素的高度,包括border及以内,不包括margin
    5. offsetParent:获取元素的定位父级元素:  
      1. 如果元素fixed定位,得到null;  
      2. 元素没有fixed情况下如果元素所有的父级元素都没定位,得到body;
      3. 元素没有fixed情况下,父级元素有定位,得到离他最近的有定位的父级元素
  2. scroll系列
    1. scrollTop和scrollLeft:获得的是内容卷曲出去的高度和宽度,当滚动条向下拉时,内容往上走,获得的就是上面跑出盒子范围的那部分高度。滚动条向右拉同理
    2. scrollWidth和scrollHeight:获得元素的实际宽度和高度,在内容没有超出盒子时,获得的是盒子的内部高度和宽度。内容超出盒子时获得的是内容实际应有的高度和宽度。当盒子内部存在滚动条时,获得的高度和宽度不包括滚动条。
    3. 根据浏览器兼容性,scroll系列需要写出兼容代码:例如scrollTop:

      1.   var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
  3. client系列
    1. clientTop和clientLeft:获得上边框和左边框的宽度。
    2. clientWidth和clientHeight:获取可视范围的宽度高度,即边框内部的,不包括border,包括padding.当盒子内部存在滚动条时,获得的高度和宽度不包括滚动条。

offset系列、scroll系列与client系列的更多相关文章

  1. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  2. 差别client、offset、scroll系列以及event的几个距离属性

    element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + ...

  3. 区别client、offset、scroll系列以及event的几个距离属性

    element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个只读属性,它包括了: css width + p ...

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

    一 scroll系列属性      ——滚动

  5. 元素的属性:client系列,scroll系列,offset系

    元素的属性 div.attributes 是所有标签属性构成的数组集合 dir.classList 是所有class名构成的数组集合 在classList的原型链上看一看到从 add()和remove ...

  6. 前端 ---client、offset、scroll系列

    client.offset.scroll系列   1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta c ...

  7. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  8. 4.client、offset、scroll系列

    client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域 ...

  9. client系列、offset系列、scroll系列

    一.client系列 clientWidth/clientHeight    是我们设置的宽和高加上内边距(没有边框) clientLeft/clientTop 就是我们设置的边框值 二.offset ...

随机推荐

  1. docker面试题集

    Docker的应用场景 Web 应用的自动化打包和发布. 自动化测试和持续集成.发布. 在服务型环境中部署和调整数据库或其他的后台应用. 从头编译或者扩展现有的OpenShift或Cloud Foun ...

  2. 算法练习LeetCode初级算法之其他

    位1的个数 解法一: class Solution { // you need to treat n as an unsigned value public int hammingWeight(int ...

  3. 从零开始学spring cloud(十) -------- hystrix简单代码示例

    一.官网文档阅读 较低级别的服务中的服务故障可能导致级联故障一直到用户. 当对特定服务的调用超过circuitBreaker.requestVolumeThreshold(默认值:20个请求)且失败百 ...

  4. java_30对文件的操作

    1.导包 导commons-io-2.4.jar包 2. public class Demo1Commons { public static void main(String[] args) { fu ...

  5. 纯css3单选框/复选框美化样式代码

    纯CSS 单/复选框 美化请选择iPhone 型号 iPhone 6s iPhone 6s Plus iPhone 7 iPhone 7 Plus   选择兴趣爱好 女 绘画 摄影 骑行   原理在这 ...

  6. VS2015一新建项目就出现未将对象引用设置到对象的实例怎么办?[z]

    https://blog.csdn.net/tiandyoin/article/details/79722800 在控制面板-卸载或修复程序太麻烦,而且不一定保证解决,可以这样------打开--C: ...

  7. OkHttp的get和post请求

    OkHttp的get.Post 由于没有看过书籍,不能将理论正确的描述出来,只能根据自己的理解,带大家认识下java开发下的OkHttp的get和post两种请求方式. 依赖的包为:okio-1.15 ...

  8. 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例

    ES5中,一共有9个Array方法 Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.pr ...

  9. 201621123002《java程序设计》第十三周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系统可以被多个用户通过网 ...

  10. arr.sort()

    var ary = [12,2,0,15,32,125,52,63,45,24]; /* * sort实现原理 每一次拿出数组中的当前项和后一项,每一次这样的操作都会让传递的匿名函数执行一次,不仅执行 ...