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 ...
随机推荐
- 管理现有数据库-web系统
1 需求 现有的业务数据需要经常被展示,所以选择django作为展示工具.只需要使用django自带的admin app,然后对现有数据库进行建模就可以搞定. 2 代码 settings: DATAB ...
- 【aspnetcore】让aspnetcore支持less文件
第一步:新建文件 CustomerFileExtensionContentTypeProvider namespace xxx { public class CustomerFileExtension ...
- display flex在部分低级android中的支付宝窗口表现
display flex用在移动端布局 当该元素是inline元素如span的时候回出现无宽高的情况,需要增加display:block: 他的子元素如果是inline元素那么也同样会出现这个问题,需 ...
- jdk下载安装配置环境变量
因为学习原因要用到一些工具,jdk12的版本与那个工具不兼容,所以这里推荐使用的是jdk1.8的版本, 不知道是电脑原因还是啥原因,jdk 12的版本用不了配不好环境变量. 首先可以在官网下载jdk1 ...
- 【转】HashMap，ArrayMap，SparseArray源码分析及性能对比
HashMap,ArrayMap,SparseArray源码分析及性能对比 jjlanbupt 关注 2016.06.03 20:19* 字数 2165 阅读 7967评论 13喜欢 43 Array ...
- 集合框架比较两个对象是否相同（equals和hashCode方法）
package com.dcz.hashset; import java.util.HashSet; import java.util.Set; /** * HashSet是接口最常用的实现类,顾名思 ...
- Django框架和前端的的基本结合
1 昨日回顾 a socket b 路由关系 c 模板字符串替换(模板语言) 主流web框架总结: django a用别人的 b自己写的 c自己写的 flask a用别人的 b自己写的 c用别人的(j ...
- Todolist总结
一.组件类里面的函数尽可能写成箭头函数的形式,方便绑定this 上面的箭头函数是好的,写面的不好,他需要在用的时候绑定this,或者在constructor绑定,如下: 如上用的时候绑定this是不好 ...
- Sencha Touch和jQuery Mobile的比较
第一组-行销和平台支持 Sencha Touch和jQuery Mobile都以HTML5框架著称.jQuery Mobile谦虚的说自己只是内建于所有流行的移动设备平台,而Sencha Touch则 ...
- 使用 Azure 创建存储和检索文件
本指南将以循序渐进的方式帮助您使用 Azure 将文件存储到云中.我们将逐一介绍如何创建存储账户.创建容器.上传文件.检索文件和删除文件.在本教程中完成的所有操作均符合 1 元试用条件. 本指南将以循 ...