关于DOM元素定位属性的深入学习
作者:sorrycc 来源:蓝色理想 发布时间:2008-04-02 11:46:00
以前写JS程序的时候,经常碰到了定位的问题。但每次都看到一半,找到需要的属性就了事了。
今天下了狠心,要花点时间,彻底地弄明白他。
以下内容看着有点眼熟也不用奇怪,因为是参考了多篇前辈的文章汇总而成,嘿嘿。
宽度、高度
jQuery(’#elem’).width() // 获取CSS定义的宽度
jQuery(’#elem’).height() // 获取CSS定义的高度
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth // 对象的滚动宽度
scrollHeight // 对象的滚动高度
Left、Top
scrollTop // 对象左边界和窗口中目前可见内容的最左端之间的距离
scrollLeft // 对象最顶端和窗口中可见内容的最顶端之间的距离
offsetTop // 距相对父节点的顶端位置
offsetLeft // 距相对父节点的左侧位置
父节点
parentNode // 就是父节点。从结构上理解并应用它。
offsetParent // 是相对父节点。从布局上理解并应用它。
鼠标相对于浏览器的 x, y 坐标
e.clientX, e.clientY
鼠标相对于触发事件容器的 x,y 坐标
e.offsetX, e.offsetY // for IE
e.layerX, e.layerY // for FF
垂直方向滚动的值
document.documentElement.scrollTop
document.body.scrollTop (Quirks Mode)
鼠标相对于页面顶部的 x, y 坐标
pageX, pageY
pageY = e.clientY + document.documentElement.scrollTop
猜你喜欢
- 近期将公司的MySQL架构升级了,由原先的一主多从换成了DRBD+Heartbeat双主多从,正好手上有一个电子商务网站新项目也要上线了,用
- 一、base64模块base64模块提供了在二进制数据和可打印ASCII字符间编解码的功能,包括 RFC3548中定义的Base16, Ba
- xml即可扩展标记语言,它可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言。从结构上,很像HTML超文本标记语
- Mysql数据库百万数据测试索引Mysql官方对索引的定义是:索引(index)是帮助Mysql高效获取数据的数据结构。进而,我们可以知道索
- 引言webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分,具体的用法就不做过多介
- 本文教程为大家分享了mysql installer community 8.0.12.0的安装,供大家参考一、下载mysql-install
- <html> <head> <meta charset="utf-8"/> <
- 本文实例为大家分享了python3通过qq邮箱发送邮件以及附件的具体代码,供大家参考,具体内容如下开启qq邮箱的smtp服务代码:impor
- 英文文档:classmethod(function)Return a class method for function.A class m
- 闲着没事看到国外一个酷站欣赏的网站不错,不过他是用FLASH做的,于是想着用JS也写一个看看,技术有限写的不是很完美,还有一些小的BUG不知
- 背景大家知道现在python主要有两个大的版本,一个是python2另一个是python3,那么不同的人可能会习惯不同的版本,而python
- 对于大多数数据科学家而言,线性回归方法是他们进行统计学建模和预测分析任务的起点。这种方法已经存在了 200 多年,并得到了广泛研究,但仍然是
- InnoDB存储引擎的关键特性包括插入缓冲、两次写(double write)、自适应哈希索引(adaptive hash index)。这
- 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断。比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,可以用if语句
- mysql中的自增auto_increment功能相信每位phper都用过,也都知道如何设置字段为自增字段,但并不是所有phper都知道au
- 一、读写文件在 Python 中,我们可以使用 open() 函数打开文件,with 语句可以自动关闭文件。读取文件内容:with open
- 而随着设备硬件配置的不断提升,对中小型应用程序来说,对算法的空间复杂度的要求也宽松了不少。不过,在当今 Web2.0 时代,对应用程序的时间
- 本文讲述了python安装mysql-python的方法。分享给大家供大家参考,具体如下:ubuntu 系统下进行的操作首先安装了pip工具
- 前言2015年,HTTP/2 发布,直到2021年公司的项目才开始在实践中应用;自己对http2诸多特点的理解只存在于字面上,于是尝试在no
- 1.文档对象模型(DOM)DOM是HTML和XML文档的编程基础,它定义了处理执行文档的途径。编程者可以使用DOM增加文档、定位文档结构、填