JS获取元素在页面的位置
JS获取元素的offsetTop,offsetLeft等属性
obj.clientWidth //获取元素的宽度(width+padding)
obj.clientHeight //元素的高度
obj.offsetLeft //元素相对于父元素的left
obj.offsetTop //元素相对于父元素的top
obj.offsetWidth //元素的宽度(width+padding+border)
obj.offsetHeight //元素的高度
//获取元素的纵坐标(相对于窗口)
- function getTop(e){
- var offset=e.offsetTop;
- if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
- return offset;
- }
//获取元素的横坐标(相对于窗口)
- function getLeft(e){
- var offset=e.offsetLeft;
- if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
- return offset;
- }
上面的方法无疑影响性能,好在浏览器给我提供了相应的接口getBoundingClientRect,这个方法最早出现在IE浏览器中,后来的浏览器也跟着支持了这个方法,而且还更加完善,IE中只能获取到元素的left,top,bottom,right的属性,而后面的现代浏览器还能获取到元素的width和height.
Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
1.0 | 3.0 (1.9) | 4.0 | (Yes) | 4.0 |
这里要注意的是,bottom是元素底部相对于窗口顶部的距离,而不是像css里面position的bottom相对于窗口底部,同理,rihgt属性是元素最右边相对于窗口左边的距离。
- var box = document.getElementById("box");
- var pos = box.getBoundingClientRect();
- box.innerHTML = "top:"+pos.top +
- "left:"+pos.left +
- "bottom:"+pos.bottom +
- "right:"+pos.right +
- "width:"+pos.width +
- "height:"+pos.height
JS获取元素在页面的位置相关推荐
- js 获取元素位置和大小_js 位置_Js宽度高度(详解)
一.js 获取元素的位置和大小----只读属性 1.元素的大小和位置 1.可视大小和位置 clientLeft,clientTop,clientWidth,clientHeight clientLef ...
- 获取元素到页面上的位置
获取元素到页面的距离 function getPosition(obj) { var post={l:0,t:0}; while(obj){ post.l += obj.offsetLeft; pos ...
- js 获取dom离页面编剧_页面对象之外:具有宁静性和编剧模式的下一代测试自动化
js 获取dom离页面编剧 在当今快节奏的软件交付世界中,自动化的验收测试至关重要. 一组高质量的自动验收测试可帮助您减少浪费在手动测试和修复错误上的时间,从而更快地交付有价值的功能. 与行为驱动开发 ...
- JS获取元素的大小(高度和宽度)
JS获取元素的大小(高度和宽度) 在 JavaScript中,使用下面 3 组属性可以获取元素的高度和宽度.如表所示. 元素尺寸属性 说明 clientWidth 获取元素可视部分的宽度,即 CSS ...
- js获取元素的方法与属性
js获取元素的方法 可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量 <scripttyp ...
- JS获取元素的第一个子节点
<html> <head><meta http-equiv="Content-Type" content="text/html; chars ...
- js点击获取—通过JS获取图片的相对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <h ...
- js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性 修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术 第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点 一份document ...
- js 获取元素的方式
js 获取元素5种的方式 1.标签获取元素 getElementsByTagName()方法返回一个动态的包含所有指定标签名的元素的集合. 语法: document.getElementsByTagN ...
最新文章
- 提高PHP编码的一些技巧
- 感恩工作平台心得体会_感恩有你,一路同行——石龙联社组织举办10月份员工集体生日会...
- 前端DEMO:网络上流行的抖音罗盘
- Laravel Query Builder 复杂查询案例:子查询实现分区查询 partition by
- 转贴:既生瑜何生亮:FreeBSD与Linux再比较
- C# 获得当前应用程序路径
- 计算机专业校企合作实施方案,校企合作-校企合作、工学结合机制实施方案
- 开坑,写点Polymer 1.0 教程第2篇(上)——hello world篇
- ACL实验详细过程讲解
- Python: str、datetime、time、seconds
- excel工作表保护如何无密码撤销
- 上海亚商投顾 早餐FM/0822新能源汽车免征购置税政策延期
- 服务器显示初始化失败怎么回事,服务器初始化失败
- 4. stm32启动代码分析(一)
- 美国LangeEylandt长岛
- 2021 IT运维调查报告
- 利用ipconfig命令查看IP及释放和重获IP
- JavaScript 实现抢购倒计时,记录恋爱1314纪念日倒计时,输出对应的天数小时分钟秒数
- redis为什么快?
- 云计算概念及Linux系统详解
热门文章
- OpenCV方形检测Square Detection的实例(附完整代码)
- c++ vector方法
- C++STL的set/ multiset容器
- c++异常的层次结构(继承在异常中的应用)
- 「Python-Bug」matplotlib画图时报错Process finished with exit code 139 (interrupted by signal 11: SIGSEGV)
- ssh中添加隧道,访问目标机器上的地址
- 2假动作,数据缓冲,CCEaseExponential,CCEaseElastic,CCEaseBounce,CCCallFunc,funcNCallBack,funcNDCallBack,funcO
- 检索数据_20_按照字符串数字组合的排序
- 语言结构体在内存的分布_结构体内存对齐,这篇文章给你彻底搞会!(干货收藏)...
- mugen4g补丁如何使用_客户端与WSUS如何连接,补丁审批,下载安装(3)