一、client

属性
clientWidth 元素被设置的宽度 + padding左右内间距
clientHeight 元素被设置的高度 + padding上下内间距
clientLeft 左 边框的宽度
clientTop 上 边框的宽度

二、offset

属性
offsetWidth 元素被设置的宽度 + padding左右内间距 + 左右边框的值
offsetHeight 元素被设置的高度 + padding上下内间距 + 上下边框的值
offsetLeft 元素外边距离父级左内边距
offsetTop 元素外边距离父级上内边距
offsetParent 返回这个元素的父级元素

注:1)offsetLeft/offsetTop:参照由父级身上的 position:absolute/fixed,如果父级元素身上没有就逐层向上查找,直到 body;

2)offset 必须和 position 配合使用,往往这个值还必须是 absolute;

3)offset往往和我们做元素的运动有关;

三、scroll

属性
scrollWidth/scrollHeight 就是我们设置的宽和高加内边距(内容没有溢出的前提,如果超出了范围就按内容而定)
scrollLeft/scrollTop 滚动条卷走的高度

四、总结

1)client系列不获取边框数值,offset会获取边框的数值;

2)以上两者获取到的数值都受元素被设置的宽高具体数值影响,如果在出现滚动条的情况下想获取元素内所有内容的实际高度,则使用scrollHeight;

3)获取浏览器的body的属性是有兼容的

var  dd=document . body || document . documentElement;

  获取body的整个文档的高

document . scrollHeight || document . documentElement . scrollHeight;

  获取屏幕的高(浏览器的可视区)

document . body || document . documentElement . clientHeight

最新文章

  1. WPF相关开源项目
  2. JBoss-7.1.1 http访问端口修改
  3. Guava学习笔记:Google Guava 类库简介
  4. gcc编译参数-fPIC的一些问题
  5. 攻城狮在路上(壹) Hibernate(二)--- 第一个hibernate程序
  6. JavaScript 入门教程一 开篇介绍
  7. Nine-Patch图片
  8. spark新能优化之数据本地化
  9. Http状态码301和302概念简单区别
  10. iOS 多线程下安全的使用定时器
  11. PHP中如何给日期加上一个月 加一周 加一天
  12. memset函数具体说明
  13. volatile关键字的特性总结
  14. AngularJS中实现服务端分页
  15. Spring Cloud authentication with JWT service
  16. Redis主从实战
  17. Announcing the Operate Preview Release: Monitoring and Managing Cross-Microservice Workflows
  18. pycharm sql语句警告
  19. Java设置运行时环境参数
  20. linux 其他知识目录

热门文章

  1. FastAPI(七十)实战开发《在线课程学习系统》接口开发--留言功能开发
  2. [ Shell ] 通过 Shell 脚本导出 CDL 网表
  3. Java基础之浅谈异常与了解断言
  4. IDM调用参数
  5. 自家APP打开微信小程序,可行吗?
  6. 前端CSS基础
  7. ThingsBoard安装编译搭建环境踩坑记录
  8. 用js实现倒计时效果
  9. Edu Cf Round 105 (Div. 2) B. Berland Crossword 1.读懂题, 2. 思维
  10. Java语言学习day07--7月6日