博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS:offsetWidth\offsetleft 等图文解释
阅读量:6231 次
发布时间:2019-06-21

本文共 1434 字,大约阅读时间需要 4 分钟。

 

网页可见区域宽: 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;

 

 

 

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

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

 

HTML控件offsetTop、scrollTop等属性

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

(摘自)

转载于:https://www.cnblogs.com/beizaibeifang/p/4005650.html

你可能感兴趣的文章
Ubuntu 16.04网络管理工具NetworkManager无法使用nm-tool的问题
查看>>
Linux下which命令使用详解(转)
查看>>
京东送货无人机曝光,正在农村进行测试
查看>>
【AI科幻】地球陨落 · 全新世界
查看>>
为什么geometry+GIST 比 geohash+BTREE更适合空间搜索 - 多出的不仅仅是20倍性能提升...
查看>>
CentOS下使用KVM克隆虚拟机自动修改网卡的MAC地址
查看>>
VMware开启虚拟化实现CentOS创建KVM
查看>>
关于神经网络,这里有你想要了解的一切!
查看>>
nginx之 [error] 6702#0:XXX is forbidden (13: Permission denied)
查看>>
apache服务器本质
查看>>
封装定制的Kali Live ISO
查看>>
Oracle日常维护脚本
查看>>
Android中Handler引起的内存泄露
查看>>
maven的安装和使用
查看>>
Vue技巧小结(持续更新)
查看>>
Linux下编译软件时指定安装目录的好处
查看>>
java中多线程模拟(多生产,多消费,Lock实现同步锁,替代synchronized同步代码块)...
查看>>
[问题]apparmor 问题导致mysql切换datadir目录失败
查看>>
2012 使用XEvent sqlserver.blocked_process_report检测阻塞
查看>>
菜鸟学C:猜数字
查看>>