没有合适的资源?快使用搜索试试~ 我知道了~
Javascript dom位置、大小、鼠标定位操作
5星 · 超过95%的资源 需积分: 10 18 下载量 172 浏览量
2009-04-17
13:14:51
上传
评论
收藏 513KB DOC 举报
温馨提示
试读
17页
做了这么久web开发,凡是涉及用js操作dom元素位置、测量dom元素大小时就心虚,因为js整整提供了二十几个属性对dom元素的位置、大小进行操作。比如:clientTop、offsetTop、scrollTop、clientWidth、offsetWidth、event.clientX等等形形色色的属性,让人看得眼花缭乱,久而久之对这些属性的运用很迷茫。为了能快速开发出合格的web应用,掌握这些属性是必要的。今天很有幸能够抽出时间来研究这些个形形色色的属性。
资源推荐
资源详情
资源评论
Javascript 元素位置、大小、鼠标定位详解
——作者:zhanngle
e-mail:zhanngle@163.com
做了这么久 web 开发,凡是涉及用 js 操作 dom 元素位置、测量 dom 元素大
小时就心虚,因为 js 整整提供了二十几个属性对 dom 元素的位置、大小进行操
作 。 比 如 :
clientTop、offsetTop、scrollTop、clientWidth、offsetWidth、event.clientX 等等形
形色色的属性,让人看得眼花缭乱,久而久之对这些属性的运用很迷茫。为了
能快速开发出合格的 web 应用,掌握这些属性是必要的。今天很有幸能够抽出
时间来研究这些个形形色色的属性。
以下是我在研究的同时记下的一些笔记,供以后参考。
在阅读之前先浏览一下这张图片,在下面的示例中将使用该图做参考。
图一
图一展示了一个 400x380 的 html 页面,页中是一个 textarea 控件,它居中于
页面,并设置了它的 padding、border、margin 宽度都为 10,背景颜色是灰色,
边框颜色是蓝色,textarea 的 width 是 200,height 是 200,以下是该 textarea 的
html 定义:
<textarea cols="20" rows="6" style="width:200; height:200; background:#CCCCCC;padding:10;
border-style:solid; border-width:10; border-color:#6699FF; margin:10;">1、钱不是问题,问题
是没钱。
2、钻石恒久远,一颗就破产。
3、水能载舟,亦能煮粥。
4、一山不能容二虎,除非一公和一母。
5、火可以试金,金可以试女人,女人可以试男人。
6、烧香的不一定是和尚,还可能是熊猫。
7、喝醉了我谁也不服,我就扶墙。
8、我就像一只趴在玻璃上的苍蝇,前途光明,出路没有。
9、问世间情为何物?一物降一物。
</textarea>
Js 有三个对象提供了对元素的大小、位置、鼠标定位进行操作
1. event 对象
2. dom 对象
3. style 对象
下面分别介绍这三个对象提供的相关属性含义。
1.event 对象
Event 对象可以获取鼠标的当前位置
1.1 event.clientX、event.clientY
以 图 一 为 例 , 如 果 鼠 标 处 在 页 面 正 中 间 , 则
event.clientX=200 , event.clientY=190 。 如 果 鼠 标 向 下 滚 动 200 , 那 么
event.clientX 还是等于 200,event.clientY 还是等于 190,因为它不计算是否有滚
动。因此可以得出结论 event.clientX 和 event.clientY 它是相对于窗口来计算鼠标
横、纵坐标,并非相对于 document。
document 相当于页面正文(body 区域)。
相对于 document 的意思是:如果鼠标向下滚动 200,那么纵坐标也会相应
增加 200,因为页面正文向下滚动了,那么它的纵坐标也要跟着向下移动。
相对于窗口的意见是:如果鼠标向下滚动 200,那么纵坐标不会改变,因为
鼠标离窗口的距离还是没有变,这一点还需要大家试验体会。
1.2 event.screenX、event.screenY
返回鼠标在屏幕上的横、纵坐标,它是相对于屏幕的。
相对于屏幕的意思是:鼠标离屏幕左上角的距离。
这个很简单无需多介绍。
1.3 event.offsetX、event.offsetY
返回鼠标在事件源对象上的横、纵坐标,它是相对于事件源对象的。
相对于事件源对象的意思是:鼠标离事件源对象左上角的距离。
虽然说它是相对于事件源对象,但它并不包含 border 区域,说得精确一点
就是它是相对于事件源对象的可见区。
以上图为例,我 先在 textarea 控件上添加单 击事件获取 event.offsetX 和
event.offsetY 的值,然后将鼠标移到可见区的正中间单击,此时事件源对象就是
textarea,event.offsetX 返回 82、event.offsetY 返回 90。如图二所示:
图二
图二展示了 offsetX 与 offsetY 属性代表的横、纵坐标。
如果将滚动条向下滚动 100,那么 offsetY 会相应增加 100,因为它是相对于
剩余16页未读,继续阅读
资源评论
- qiuyajun19772013-03-11非常感谢分享,很详细,找了很久相关的资料
- liangduofeng2012-09-25非常感谢您的分享,文件很清楚解释了这几个不同元素的区别。
leon@love
- 粉丝: 110
- 资源: 7
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功