JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
来源:互联网 发布:linux必备工具 编辑:程序博客网 时间:2024/05/22 06:40
网页可见区域宽: 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
- JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
- 浏览器窗口操作innerWidth/clientWidth/offsetWidth/scrollWidth
- js scrollLeft,scrollWidth,clientWidth,offsetWidth
- JS获取各种宽度、高度 【scrollWidth clientWidth offsetWidth】
- js:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
- js:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
- js:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
- js:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
- JS中关于clientWidth、offsetWidth、scrollWidth
- scrollLeft,scrollWidth,clientWidth,offsetWidth
- scrollLeft,scrollWidth,clientWidth,offsetWidth
- scrollLeft,scrollWidth,clientWidth,offsetWidth
- offsetWidth、clientWidth、scrollWidth、scrollTop
- offsetWidth、clientWidth、scrollWidth、scrollTop
- scrollWidth,clientWidth,offsetWidth 区别
- scrollLeft,scrollWidth,clientWidth,offsetWidth
- offsetWidth,scrollWidth,clientWidth
- 刚体动力学仿真 in Matlab/Mathematica
- 机器学习(Machine Learning)&深度学习(Deep Learning)资料(Chapter 2)
- mysql分表和表分区详解
- 根据状态值改变PopupMenu显示的菜单项
- PHP把数组写进csv,和从csv文件以数组的形式读取数据
- JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
- 关于声音Festival Text-to-Speech声音种类及说话人/sound_play
- HTML5源码-实现一个简单的个人主页
- 了解属性动画
- Retrofit2.0 公共参数(固定参数)
- 关于短信平台配置步骤
- hadoop 伪分布式集群的搭建
- 【备忘】传智播客35期JavaEE工程师从基础到实战视频
- 将一个字符串逆序输出