`
ywg2008
  • 浏览: 46433 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

关于javascript中获取坐标的参数

阅读更多
 
  1. //获取坐标位置  
  2. function getpos(e) {  
  3.     var t=e.offsetTop;  
  4.     var l=e.offsetLeft;  
  5.     var height=e.offsetHeight;  
  6.     while(e=e.offsetParent) {  
  7.         t+=e.offsetTop;  
  8.         l+=e.offsetLeft;  
  9.     }  
  10. }  

假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。
obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

例如:
 
  1. <div id="tool">  
  2.     <input type="button" value="提交">  
  3.     <input type="button" value="重置">  
  4. </div>  

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。

“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离,因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离,因为距其左边最近的是“提交”按钮的右边框。


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均无关)
分享到:
评论

相关推荐

    javascript中获取坐标的参数

    javascript中获取坐标的参数javascript中获取坐标的参数javascript中获取坐标的参数javascript中获取坐标的参数

    百度地图api获取坐标

    **标题:“百度地图API获取坐标”** 在现代的Web开发中,地理位置信息的获取与处理是不可或缺的一部分。百度地图API(Application Programming Interface)为开发者提供了一种强大的工具,能够帮助我们轻松地在网页...

    JS点击百度地图获取坐标代码.zip

    这个"JS点击百度地图获取坐标代码.zip"文件包含了一个基本示例,通过`index.html`文件展示了如何实现这一功能。下面我们将深入探讨相关知识点。 1. **百度地图API** 百度地图API是百度提供的一套JavaScript接口,...

    javascript获取鼠标当前位置坐标并显示

    ### JavaScript 获取鼠标当前位置坐标并显示 #### 知识点概览 本文将详细介绍如何使用JavaScript来获取鼠标在页面上的当前位置坐标,并实时显示这些坐标值。该功能主要涉及到以下几个知识点: 1. **事件监听器...

    javascript获取对象的绝对坐标

    - **参数**: `obj` 是需要获取坐标的 DOM 元素。 - **变量**: - `curleft`: 记录当前元素的 X 轴坐标。 - `curtop`: 记录当前元素的 Y 轴坐标。 - **逻辑**: - 如果 `obj` 的 `offsetParent` 存在,则进入循环,...

    JavaScript获取对象在页面中位置坐标的方法

    在JavaScript中,获取页面元素的位置坐标是Web开发中常见的需求,这主要涉及到DOM(文档对象模型)的操作。本文将详细讲解如何使用JavaScript的内置属性和方法来获取对象在页面中的位置坐标。 首先,我们需要理解两...

    js 动态设置图片的热区并获取图片坐标

    在JavaScript中,动态设置图片的热区(hotspots)并获取图片坐标是一项常见的需求,尤其在交互式网页设计中。热区技术允许我们为图片指定特定的交互区域,用户点击或悬停在这些区域上时可以触发特定的事件。本文将...

    使用JavaScript获取客户端的鼠标坐标信息

    总结起来,通过JavaScript获取客户端鼠标的坐标信息主要涉及`event.clientX`、`event.clientY`、`getBoundingClientRect()`以及滚动偏移量等概念。理解和掌握这些知识点,可以让你在构建交互式Web应用时更加得心应手...

    JavaScript实现鼠标移到地图上显示实际地理坐标

    3. 初始化地图:在JavaScript中,使用`SuperMap.Map`构造函数初始化地图,设置地图的容器ID、投影类型等参数。 4. 添加数据源和图层:为了在地图上显示内容,我们需要添加数据源(如WMS服务)和图层。这可以通过`...

    腾讯地图搜索地址获取坐标.rar

    首先,我们要了解的是“腾讯地图搜索地址获取坐标”的基本原理。这是通过调用腾讯地图API中的地理编码(Geocoding)功能实现的。地理编码是一种将人类可读的地址(如街道、城市、国家)转换为机器可理解的地理位置...

    Javascript获取页面、屏幕尺寸大小参数.

    以下将详细解析如何利用JavaScript来获取这些参数,包括页面尺寸、滚动位置、屏幕分辨率等关键知识点。 ### 页面尺寸与滚动位置 #### `document.body.clientWidth` 和 `document.body.clientHeight` 这两个属性...

    javascript获得鼠标的坐标值

    在JavaScript中,获取鼠标的坐标值是一项常见的任务,它在用户交互和动态界面设计中扮演着重要角色。根据描述,我们将讨论两种不同的场景来获取这些坐标:一是相对于`body`元素,二是相对于某个特定的对象。 ### 1....

    JavaScript绘制曲线、圆形饼图实例

    该函数将起始点坐标和终止点坐标作为参数,然后使用JavaScript来绘制线条。 知识点5:JavaScript实现坐标系转换 在绘制曲线和圆形饼图时,我们需要将坐标系转换到浏览器的坐标系中。在本实例中,我们定义了一个orgY...

    【JavaScript源代码】JavaScript使用canvas绘制坐标和线.docx

    接着,通过JavaScript获取这个`&lt;canvas&gt;`元素及其渲染上下文: ```javascript var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); ``` #### 三、绘制坐标轴 接下来,我们定义坐标轴的...

    js实现获取div坐标的方法

    在本文中,我们将深入探讨如何使用JavaScript来获取页面中div元素的坐标。这是一项基础且实用的技术,在Web开发中经常会用到,尤其是在进行DOM操作、实现自定义的交互效果或开发动画时,获取元素的位置信息是必不可...

    js地理坐标与屏幕坐标互转换

    在ArcGIS JavaScript API中,地理坐标与屏幕坐标的相互转换是一项重要的功能,它允许开发者将地图上的地理位置(经纬度)转换为用户界面中的像素位置,反之亦然。这对于实现地图交互、绘制图形以及进行空间分析等...

    源代码——MFC的WebBrowser控件 C++与JavaScript之间数据交互传递

    7. **C++到JavaScript的数据传递**:C++可以通过`IWebBrowser2::ExecWB`或`IWebBrowser2::Navigate2`方法执行JavaScript代码,将数据作为参数传递。也可以设置`IWebBrowser2`的`Document`属性,间接修改HTML页面内容...

    three.js 入门示例,含坐标系、相机参数

    标题"three.js 入门示例,含坐标系、相机参数"表明这个示例项目是关于three.js的初学者教程,主要关注如何设置和理解三维空间中的坐标系以及调整相机参数来观察场景。three.js是一个基于WebGL的JavaScript库,用于在...

    【JavaScript源代码】教你javascript如何获取指针的位置.docx

    首先,我们要知道在JavaScript中,`event`对象是事件触发时传递给事件处理函数的参数,它包含了与事件相关的各种信息,如鼠标的位置。对于获取鼠标在页面中的位置,我们可以使用`event.pageX`和`event.pageY`这两个...

Global site tag (gtag.js) - Google Analytics