js获取控件位置
- //获取坐标位置
- function getpos(e) {
- var t=e.offsetTop;
- var l=e.offsetLeft;
- var height=e.offsetHeight;
- while(e=e.offsetParent) {
- t+=e.offsetTop;
- l+=e.offsetLeft;
- }
- }
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。
obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。
例如:
- <div id="tool">
- <input type="button" value="提交">
- <input type="button" value="重置">
- </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均无关)
via:http://www.cnblogs.com/illele/archive/2009/03/18/1415802.html
js获取控件位置的更多相关文章
- js获取控件位置以及不同浏览器中的差别
js获取控件位置(坐标位置)在不同浏览器中的差别. //获取坐标位置 function getpos(e) { var t=e.offsetTop; var l=e.offsetLeft; var h ...
- asp.net js获取控件ID
ClientID是由ASP.Net生成的服务器控件得客户端标识符,当这个控件生成到客户端页面的时候,在客户端代码访问该控件时就需要通过ClientID来访问. 以文本框为例: 一.未使用母版页 js可 ...
- js获得控件位置
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- Qt获取控件位置,坐标总结
总结的结果是: QMouseEvent中两类坐标系统,一类是窗口坐标,一类是显示器坐标. 总结一:经过试验,QMouseEvent::globalPos() 和 QCursor::pos()效果 ...
- swift 获取控件位置 大小
var SearchBtn = uibutton() SearchBtn.frame.origin.x //获取坐标x SearchBtn.frame.origin.Y // 获取坐标Y Sea ...
- javascript控制滚动条的位置,获取控件的位置
一.如下是定位鼠标在视窗中的位置,先定位视窗和页面直接的距离. function getMousePoint() { var point = {x:0,y:0}; // 如果浏览器支持 pageYOf ...
- 获取控件id
普通状态中JS获取控件IDdocument.getElementById('controlID'); JS获取父窗口控件IDwindow.parent.document.getElementById( ...
- jQuery学习笔记(控件位置定位、尺寸大小的获取等)
想做一个幽灵按钮出来,效果大概如下图: 当点击按钮的时候,会有四根线条从四个方向飞入,经历从“无-有-无”的闪入过程. 那么我的设计想法是,先在HTML中定义一个按钮,然后在jQuery中设计按钮点击 ...
- js中使用控件名和数组下标方式获取控件的值时失败
在做界面展示时涉及到表单行项目的增加和删除时,我们一帮都使用js的脚本实现表单行的增加和删除,那么在进行表单的提交的时我们会再页面上进行提交数据的初步校验,进行数据的初步校验时,就要动态获取控件的值. ...
随机推荐
- CSS通用编码规范
CSS通用编码规范 总结一部分前端编码规范,CSS部分先奉上,大多比较通用,应该是主流方式吧. 1 前言 本文档的目标是使 CSS 代码在团队中风格保持一致,容易被理解和被维护. 尽管本文档是针对 C ...
- SQL(Oracle)日常使用与不常使用函数的汇总
--日常使用的sql语句和oracle语句,有些相对使用的频率比较高,收藏起来还是比较值得的 -- 绝对值 SQL:) value Oracle:) value from dual -- 2.取整(大 ...
- Random类短时间大量随机重复的问题
先声明一下,我是在那篇文章上看到的解决方法: http://dl.download.csdn.net/down10/20141103/4b173214e41ff3207305c2470524b0f3. ...
- 条款16:成对使用new和delete时,采取相同的形式
问题聚焦: 我们都知道,new和delete要成对使用,但是有时候,事情往往不是按我们预期的那样发展. 对于单一对象和对象数组,我们要分开考虑. 遇到typedef时,也需要搞 ...
- Lucence.net索引技术 二
一. Lucene索引创建和优化 [版本2.9.0以上] Lucene索引的创建首先需要取得几个必须的对象: 1.分词器//可以采用其他的中文分词器 StandardAnalyzer analyzer ...
- [LeetCode]题解(python):121-Best Time to Buy and Sell Stock
题目来源: https://leetcode.com/problems/best-time-to-buy-and-sell-stock/ 题意分析: 给定一个数组,代表array[i] 代表第i天的价 ...
- HTML+CSS笔记 CSS进阶
文字排版 字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果 ...
- linux服务器安全小知识
使用单用户模式进入系统 Linux启动后出现boot:提示时,使用一个特殊的命令,如linuxsingle或linux 1,就能进入单用户模式(Single-User mode).这个命令非常有 ...
- VS2010/MFC对话框:非模态对话框的创建及显示
非模态对话框的创建及显示 上一节讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切 ...
- 如何判断一个变量是数组Array类型
在很多时候,我们都需要对一个变量进行数组类型的判断.JavaScript中如何判断一个变量是数组Array类型呢?我最近研究了一下,并分享给大家,希望能对大家有所帮助. JavaScript中检测对象 ...