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中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
用JavaScript编写COM组件的步骤
Mar 17 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
了解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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php单例模式的简单实现方法
2016/06/10 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
js constructor的实际作用分析
2011/11/15 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
详解如何实现一个简单的 vuex
2018/02/10 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
Python实现一个简单的验证码程序
2017/11/03 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
python实现一组典型数据格式转换
2018/12/15 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
单位在职证明书
2014/09/11 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
2014年协会工作总结
2014/11/22 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
python使用torch随机初始化参数
2022/03/22 Python