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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
Convert Seconds To Hours
Jun 16 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
javascript中json基础知识详解
Jan 19 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
js中apply和call的理解与使用方法
Nov 27 Javascript
Node.js Domain 模块实例详解
Mar 18 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 escape URL编码
2008/12/10 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
window.parent与window.openner区别介绍
2012/04/12 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
wxPython 入门教程
2008/10/07 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
法律工作求职自荐信
2013/10/31 职场文书
校长寄语大全
2014/04/09 职场文书
春游踏青活动方案
2014/08/14 职场文书
教师个人师德总结
2015/02/06 职场文书
地道战观后感2000字
2015/06/04 职场文书
公司管理建议书
2015/09/14 职场文书
晚会开幕词范文
2016/03/04 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫
vue判断按钮是否可以点击
2022/04/09 Vue.js
MongoDB数据库之添删改查
2022/04/26 MongoDB
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS