JS中关于clientWidth offsetWidth scrollWidth 等的含义的详细介绍
网页可见区域宽： 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;
1、offsetWidth (width+padding+border)
当前对象的宽度。
style.width也是当前对象的宽度(width+padding+border)。
区别：1)style.width返回值除了数字外还带有单位px；
2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小，
style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值；
3)如果没有给 HTML 元素指定过 width样式，则 style.width 返回的是空字符串；
2、offsetHeight :(Height+padding+border)
当前对象的高度。
style.height也是当前对象的高度(height+padding+border)。
区别：1)style.height返回值除了数字外还带有单位px；
2)如对象的高度设定值为百分比高度,则无论页面变高还是变矮，
style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值；
3)如果没有给 HTML 元素指定过 height样式，则 style.height返回的是空字符串；
3、offsetLeft :
当前对象到其上级层左边的距离。
不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。
style.left当前对象到其上级层左边的距离。
区别：1)style.left返回值除了数字外还带有单位px；
2)如对象到其上级层左边的距离设定值为百分比，
style.left返回此百分比,而offsetLeft则返回到其上级层左边的距离的值；
3)如果没有给 HTML 元素指定过 left样式，则 style.left返回的是空字符串；
4、offsetTop :
当前对象到其上级层顶部边的距离。
不能对其进行赋值.设置对象到上级层顶部边的距离请用style.top属性。
style.top当前对象到其上级层顶部边的距离。
区别：1)style.top返回值除了数字外还带有单位px；
2)如对象到其上级层顶部边的距离设定值为百分比，
style.top返回此百分比,而offsetTop则返回到其上级顶部边的距离的值；
3)如果没有给 HTML 元素指定过 top样式，则 style.top返回的是空字符串；
注意：如果上级层为body，由于IE、FF对padding、margin的解释不一样所以要明确规定处理不是下列的区别就不成立了。
IE 1)如果Div的上级层是body，而div与body之间有个div，如body->div->divo；divo的offsetTop=div的padding+margin+boder；
2）如果Div的上级层是body，如body>divo；divo的offsetTop=div的padding+margin+boder；
这divo的offsetTop=divo的margin >body.padding则为divo的margin，否则为body.padding谁大是谁？
FF 上述两种情况：offsetTop=margin+padding ;
(IE与FF中的body默认padding为10)在IE6.0 FF3.6.13
5、scrollWidth:获取对象的滚动宽度 。
6、scrollHeight: 获取对象的滚动高度。
7、scrollLeft:设置或获取位于对象左边界和对象中目前可见内容的最左端之间的距离(width+padding为一体)
8、scrollTop:设置或获取位于对象最顶端和对象中可见内容的最顶端之间的距离；(height+padding为一体)
9、clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框；
10、clientHeight: 获取对象可见内容的高度，不包括滚动条，不包括边框；
11、clientLeft: 获取对象的border宽度
12、clientTop：获取对象的border高度
13、offsetParent :当前对象的上级层对象.
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
以上属性测试的文档类型为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果不写文档类型，浏览器就会按照 HTML 4.0 的方式来处理，则效果可能不同。
JS中关于clientWidth offsetWidth scrollWidth 等的含义的详细介绍的更多相关文章
- JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...
- JS中关于clientWidth offsetWidth scrollWidth 等的含义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- js中的clientWidth offsetWidth scrollWidth等的含义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- JS中关于clientWidth offsetWidth scrollWidth 的区别及意义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- JS中关于clientWidth offsetWidth scrollWidth 等的区别
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- JS中关于clientWidth offsetWidth srollWidth等的含义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- js中Number()、parseInt()和parseFloat()的区别进行详细介绍
http://www.jb51.net/article/100606.htm 区别: parseFloat,parseInt 解析的过程中如果前面有空格,结果不会有任何影响,Number解析的时候结 ...
- clientWidth,offsetWidth,scrollWidth区别
<html> <head> <title>clientWidth,offsetWidth,scrollWidth区别</title> </head ...
- IIS7中的站点、应用程序和虚拟目录详细介绍
IIS7中的站点.应用程序和虚拟目录详细介绍 这里说的不是如何解决路径重写或者如何配置的问题,而是阐述一下站点(site),应用程序(application)和虚拟目录 (virtual direct ...
随机推荐
- TTM-To the moon
传送门 查询历史版本,回到历史版本,这个题目显然是用主席树,好像就没了! 但是这里的修改是区间修改,众所周知主席树的空间复杂度是\(nlog(n)\)的,区间修改会导致主席树的开点到达一个相当恐怖的数 ...
- Redis - Windows平台下怎么切换db并且清理数据
Redis 本身支持16个数据库(0~15),通过 数据库id 设置,默认为0.在Windows平台下可以通过启动redis-cli.exe来进入客户端,客户端默认连接数据库0,在客户端里可以输入各种 ...
- 分布式通信-tcp/ip 单播
服务端 public class SingleBroadCastSocketServer { public static void main(String[] args) { ServerSocket ...
- Zynq7000开发系列-5（OpenCV开发环境搭建：Ubuntu、Zynq）
操作系统:Ubuntu14.04.5 LTS 64bit OpenCV:OpenCV 3.1.0.opencv_contrib gcc:gcc version 4.8.4 (Ubuntu 4.8.4- ...
- [aspnetcore]asp.net core程序部署到Ubuntu中的路径问题
先标记下正确写法 new FileInfo(Environment.CurrentDirectory + "/Config/Log4net.config") 很多同行喜欢这样写: ...
- (转载)Unity 优化总结
Unity 优化总结 2017-03-10 | 发布 大海明月 zengfeng75@qq.com | 分类 Unity | 标签 Unity 优化 相关文档 UGUI 降低填充率技巧两则 U ...
- 《javascript设计模式》笔记之第五章：单体模式
一:单体的基本结构: 最简单的单体,实际就是一个对象字面量: var Singleton = { attribute1: true, attribute2, method1: function() { ...
- 6、旋转数组的最小位置------------>剑指offer系列
题目 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转, ...
- /etc/default/useradd
系统默认的shell在,/etc/default/useradd 中,添加用户的时候如果不指定shell,默认的shell就是该文件下制定的文件
- 利用UnblockNeteaseMusic实现网易云破版权,并实现shell可快速访问
注:本篇包含mac及windows下安装方式详细 mac安装 前提:安装有node环境,可参考 mac下安装nodejs 安装 下载git代码到本地 git clone https://github. ...