offset系列
offset动态的得到目标元素的位置(偏移)大小等

offset系列常用属性

offset系列属性 作用
element.offsetParent 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offset Left 返回元素相对带有定位父元素左边框的偏移
element.offsetWidth 返回自身包括padding、边框、内容区的宽度,返回数值不带单位
element.offsetHeight 返回自身包括padding、边框、内容区的高度,返回数值不带单位

offset属性示意图

client系列:可视区
使用client系列的相关属性 获取元素可视区的相关信息

client常见属性

client系列属性 作用
element.clientTop 返回元素上边框的大小
element.clientLeft 返回元素左边框的大小
element.clientWidth 返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位
element.clientHeight 返回自身包括padding、内容区的高度,不含边框,返回数值不带单位

client属性示意图

scroll系列
scroll翻译过来就是滚动的,使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等等

scroll系列常用属性

scroll系列属性 作用
element.scrollTop 返回被卷去的上侧距离,返回数值不带单位
element.scrollLeft 返回被卷去的左侧距离,返回数值不带单位
element.scrollWidth 返回自身实际的宽度,不含边框,返回数值不带单位
element.scrollHeight 返回自身实际的高度,不含边框,返回数值不带单位

scroll属性示意图

js中offset、client、scroll【总结】相关推荐

  1. offset/client/scroll一些总结

    offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...

  2. js中offset、client、scroll的区别

    偏移量:offset dimension offsetHeight: 元素在垂直方向上占用的空间大小,以像素计.包括元素的高度.(可见的)水平滚动条的高度.上边框高度和下边框高度. offsetWid ...

  3. Web APIs介绍(四)——offset/client/scroll/轮播图/本地存储

    1.1. 元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距 ...

  4. offset client scroll

    页面中所有标签都是元素(element),html标签是根元素,元素可看出是对象 页面中所有内容都是节点(node),所以标签.属性.文本都是节点,而文本包括文字回车换行空格 在DOM对象上有个 pr ...

  5. 三大系列总结(offset client scroll)

    元素偏移量offset offset概述 获得元素距离带有定位父元素的位置 如果子元素没有父亲或者父元素没有定位,则以body为准 获得元素自身的大小(包含padding+border+width) ...

  6. 窗口和元素的大小:offset client scroll

    1.偏移量(offset)只读 offsetHeight:元素垂直方向上占用的空间大小.包括元素内容区高度.元素上下内边距.(可见的)水平滚动条高度.上下边框高度 offsetWidth:元素水平方向 ...

  7. 原生JS中的三大家族(offset/scroll/client)与jQuery中对应的方法

    JS中的offset家族: 一.offsetEWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽 ...

  8. .net label在父容器中占两行显示_十分钟快速了解 JS 中的 offset、scroll、client

    经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...

  9. extjs中滚动条属性_十分钟快速了解 JS 中的 offset、scroll、client

    (给前端大全加星标,提升前端技能) 作者:前端下午茶 公号 /  SHERlocked93 在下开发中经常碰到 offset.scroll.client 这几个关键字,比如 offsetLeft.of ...

最新文章

  1. 回归——同步更新github.io
  2. nginx服务器的负载均衡和动静分离(未完)
  3. 浏览器崩溃时提示137错误
  4. 蓝桥杯-安慰奶牛(java)
  5. Android Studio新建类头部注释和添加函数注释模板及快捷键
  6. 进度条设置_项目功能分解4:MATLAB GUI如何设计有特色的进度条。
  7. Browser控制台分析
  8. 全国计算机等级考试题库二级C操作题100套(第18套)
  9. .NET Core dotnet 命令大全
  10. Xftp远程连接出现“无法显示文件夹”的问题补充
  11. 小米4刷CM13系统
  12. python输入名字配对情侣网名_输入姓名配对qq网名,QQ情侣昵称
  13. CentOS 使用spawn-fcgi配置Nginx+PHP 启动脚本
  14. tomcat后台密码爆破脚本(python+字典)_Web中间件漏洞之Tomcat篇
  15. mysql用utf-8_切记:永远不要在MySQL中使用UTF-8
  16. 将ttc改为otf_几种字体格式的区别otf/ttf/ttc格式字体的区别
  17. 随机森林 Iris 特征重要性
  18. 关于键盘方向键的ASCII的问题解释
  19. 谷歌tts android手机自带引擎,自动下载android TTS引擎
  20. MySQL数据库——SQL函数

热门文章

  1. 一加7Tpro刷鸿蒙,稀缺全面屏旗舰手机一加7T Pro 再不买真就没了
  2. 斯坦福CS234增强学习——(1)简介
  3. java——集合——List集合——List集合
  4. https安全传输揭秘 1
  5. 离谱,还有这种自暴自弃的翻译?
  6. 计算机怎么消除用户密码,电脑开机设置了密码要怎么删除
  7. 鲸鱼算法优化PID参数优化附matlab代码
  8. 2021年第四届“传智杯“大学B组
  9. Cell Genomics封面|北大吴华君组利用空间多组学技术解析肿瘤内空间异质性(附招聘)...
  10. python逻辑回归的主要参数_python机器学习(六)回归算法-逻辑回归