1.

2.

clientWidth是对象看到的宽度(不含边线,即border)
scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间距离,如有padding,就是左padding和右padding之间距离)。
offsetWidth是指对象自身的宽度,整型,单位像素(含边线,如滚动条的占用的宽,值会随着内容的输入而不断改变)。

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

易混淆点:

clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。 
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。 
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。 
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。

document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;

网页可见区域宽: document.body.offsetWidth (包括边线的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);

网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;

offsetwidth/offsetheight的区别相关推荐

  1. offsetwidth/clientwidth的区别

    offsetwidth/clientwidth的区别 clientWidth是对象看到的宽度(不含边线,即border) scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间 ...

  2. ie6 offsetWidth/offsetHeight无效

    ie6 offsetWidth/offsetHeight无效 可采用手动获取: offsetWidth=parseInt(node.style.width)+parseInt(node.style.p ...

  3. 对于offsetWidth,offsetHeight,offsetLeft,offsetTop的理解

    如何理解区分offsetWidth,offsetHeight,offsetLeft,offsetTop 在刚开始使用的时候总是不能理解这四个有什么不一样,用在哪里,因为这几个词真的太像了,emmm,总 ...

  4. offsetWidth / offsetHeight等

    1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度(content+padding+border) offsetHeight:返回元素的 ...

  5. getBoundingClientRect offsetWidth offsetHeight

    对于一个旋转的dom元素,getBoundingClientRect()得到的width,height是外接矩形的宽高, offsetWidth offsetHeight是未旋转前dom的宽高

  6. 看图理解scrollTop,scrollLeft,clientWidth,clientHeight,offsetWidth,offsetHeight

    每次用JS获取页面的高宽时总都是相当的揪心,同一个属性在不同的浏览器或不同的W3C标准下所表示的意思都不尽相同.以下就针对页面的实际高宽和可见区域做个总结,以便大家查阅! 1. 在W3C标准的情况下 ...

  7. Height、offsetWidth、ClientHeight 区别

    转载:http://www.pqshow.com/design/jiqiao/200911/12509.html 假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于 ...

  8. scrollHeight, clientHeight, offsetHeight的区别

    浏览器窗口和网页文档 先明确浏览器窗口和网页文档的区别,拿下面这张图来说 右边那张图中,大红色方框框起来的是浏览器窗口,而网页文档就是左边这张图.先不用去管scrollHeight这些东西,后面再解释 ...

  9. 一文看懂js中元素偏移量(offsetLeft,offsetTop,offsetWidth,offsetHeight)

    偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小由其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...

最新文章

  1. 深度学习七个实用技巧
  2. 如何规划令人流连忘返的网站?
  3. Matlab如何读取文本文件
  4. BLE】CC2541之通过RSSI测距
  5. java中 移位运算_java中关于移位运算符的demo与总结(推荐)
  6. 网络管理的任务包括linux,网络管理员的任务是阻止的10.152.8.0/21 一个基于Linux的防火墙的网络子网的默认端口上的所有出站SSH 连接。以下哪项规则集将完成这项任务?(单选题)...
  7. linux 重置网卡配置_Linux不进入网卡配置文件更改静态ip
  8. 关于代码调试de那些事
  9. 查找算法---二分查找(递归方式)
  10. C++:vector二维数组初始化
  11. 基于SSM企业人事管理系统.doc
  12. 计算机处理器性能排名,2020最新电脑cpu性能天梯图_i5i7i9处理器性能排行榜介绍...
  13. 输入框限制规则 只能输入数字 只能输入字母数字 等等
  14. 漫谈数据结构系列(一)之僧敲月下门
  15. 顺丰php下单,顺丰订单查询
  16. mysql查询练习tblstudent_通过Navicat进行MySQL的基础查询练习
  17. 王者荣耀服务器维护多久结束,王者荣耀健康系统重置时间 时间限制规则详解...
  18. 【python】用ChatGPT使用爬虫
  19. 数字图像处理Matlab
  20. TIA Portal高级编程

热门文章

  1. 在word中使用notepad++实现代码的语法高亮
  2. 关于反射调用方法的一个log
  3. C# C/S 图片验证码功能源码
  4. MariaDB杂记(2)
  5. 安装Scala时报UnsupportedClassVersionError
  6. Android SDK上手指南:应用程序数据
  7. android 61 logcat
  8. express-partials与express4.x不兼容问题
  9. Silverlight/Windows8/WPF/WP7/HTML5周学习导读(10月15日-10月21日)
  10. ASP.NET中进行消息处理(MSMQ)