JavaScript 页面坐标相关知识整理


Posted in Javascript onJanuary 09, 2010

JavaScript 页面坐标相关知识整理
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:

一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
二、offsetTop 只读,而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

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
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关系);

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

//对象坐标 
var oRect = document.getElementById("divHotImg").getBoundingClientRect(); 
x=oRect.left 
y=oRect.top 
//alert("("+x+","+y+")") if(ns4||ns6){ 
x = e.pageX; 
y = e.pageY; 
}
Javascript 相关文章推荐
jquery 学习之一 对象访问
Nov 23 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
了解jQuery技巧来提高你的代码
Jan 08 #Javascript
在html页面上拖放移动标签
Jan 08 #Javascript
利用js获取服务器时间的两个简单方法
Jan 08 #Javascript
JavaScript中的集合及效率
Jan 08 #Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 #Javascript
Extjs学习笔记之八 继承和事件基础
Jan 08 #Javascript
Extjs学习笔记之七 布局
Jan 08 #Javascript
You might like
PHP中的类-什么叫类
2006/11/20 PHP
js parseInt("08")未指定进位制问题
2010/06/19 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
Java模拟试题
2014/11/10 面试题
经贸日语专业个人求职信
2013/12/13 职场文书
《学会合作》教学反思
2014/04/12 职场文书
我爱读书演讲稿
2014/05/07 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
情人节活动总结范文
2015/02/05 职场文书
我是特种兵观后感
2015/06/11 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android