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 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
JavaScript 给汉字排序实例代码
Jun 28 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
jQuery formValidator表单验证
Jan 07 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 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读取RSS feed的代码
2008/08/01 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python中的自省(反射)详解
2015/06/02 Python
Python实现快速多线程ping的方法
2015/07/15 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
python django事务transaction源码分析详解
2017/03/17 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
什么样的创业计划书可行性高?
2014/02/01 职场文书
公司任命书范本
2014/06/04 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
财务务虚会发言材料
2014/10/20 职场文书
争先创优个人总结
2015/03/04 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers
Nginx限流和黑名单配置
2022/05/20 Servers