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 ...
随机推荐
- iOS UITableView 解决估算行高和指定行高的矛盾
喜欢交朋友的加:微信号 dwjluck2013 1.一般来说 在iOS 中若UITableViewCell 固定行高, 会通过 - (CGFloat)tableView:(UITableView *) ...
- c# 参数传递问题(形参与实参)
形参是指被调用方法中的参数 实参是指传递给方法的参数 (1)值类型传参是按值传递 值类型传参,形参接受到的是实参的一个副本,即形参发生变化,实参不会发生任何变化 (2)引用类型参数按值传递 当参数传递 ...
- 转 PHP 正则表达式 以及案例
2．Perl兼容的语法扩充 Perl兼容的正则表达式的模式类似于Perl中的语法,表达式必须包含在定界符中,除数字.字母.反斜线外的任何字符都可以作为定界符.例如,表达式’/^(?i)php[34]/ ...
- zTree树插件动态加载
需求: 由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 zTree.init方法进行数据加载,将所有数据一次性加载到页面中.而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全 ...
- C#oracle备份和还原
最近公司的oracle备份工具不好使了,原来是公司的人用VB写的,由于我是主攻C#的,所以想着自己来写一个C#版本的oracle备份和还原工具. 一开始,我按照原来的设计思路来进行编写,想在pluss ...
- 服务器 未能加载文件或程序集“XXXX”或它的某一个依赖项。试图加载格式不正确的程序。
,本人采用的第一种解决办法解决,已解决 问题2: 在同一个服务器上想要一个IP有两个网址,配置端口号,给新端口号开权限
- mirror.js 整合redux的好工具
mirror.js 很简单,让state管理更方便了,没有新增api,值 得使用 https://github.com/yurizhang/mirror package.json { "na ...
- js AES对称加密 16进制和base64格式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Java编程简介
作者:CHAITANYA SINGH 来源:https://www.koofun.com//pro/kfpostsdetail?kfpostsid=3 JAVA由Sun Microsystems In ...
- JavaScript中，关于class的调用
PS:class的调用,其实是可以叠加的,当然了这要求样式不同的情况下,如果样式相同,则后一个样式会覆盖前一个样式. 1.举例如下: <div id="test" class ...