js如何获取某个html元素的x y坐标
时间:2017-11-04
在网站前端开发过程中,我们有时候需要获取某一个元素的x y坐标,一般我们都是使用js方法来获取的,本文章将向大家分享几种获取html元素的x y坐标的方法,需要的朋友可以参考一下。
js获取某个html元素的x y坐标,方法如下:
第一种方法:使用js的getBoundingClientRect()
方法
代码:
function getOffset(el) {
el = el.getBoundingClientRect();
return {
left: el.left + window.scrollX,
top: el.top + window.scrollY
}
}
第二种方法:使用offsetLeft 和offsetTop
代码如下:
var getAbsPosition = function(el){
var el2 = el;
var curtop = 0;
var curleft = 0;
if (document.getElementById || document.all) {
do {
curleft += el.offsetLeft-el.scrollLeft;
curtop += el.offsetTop-el.scrollTop;
el = el.offsetParent;
el2 = el2.parentNode;
while (el2 != el) {
curleft -= el2.scrollLeft;
curtop -= el2.scrollTop;
el2 = el2.parentNode;
}
} while (el.offsetParent);
} else if (document.layers) {
curtop += el.y;
curleft += el.x;
}
return [curtop, curleft];
};
- 教程 | 基于计算机视觉使用Python和OpenCV计算道路交通
- 干货 | MVP模式在携程酒店的应用和扩展
- memlock过低导致的数据库性能问题(r6笔记第10天)
- OpenCV和SVM分类器在自动驾驶中的车辆检测
- 自动驾驶的模型预测控制
- 【专业技术】使用html5的十大原因
- 第五课:推理结果的可视化
- 第四课:模型的使用
- 【Java概念学习】--数组的初始化
- linux下重命名文件或文件夹使用mv既可实现。
- 第三课:把tensorflow,模型和测试数据导入Android工程
- D-Link 路由器信息泄露和远程命令执行漏洞分析及全球数据分析报告
- Wordpress安全架构分析
- CVE-2017-5123 漏洞利用全攻略
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 踩坑ThinkPHP5之模型对象返回的数据集如何转为数组
- PHP基础编程之鬼斧神工的正则表达式-正则表达式基本语法+简单实例
- PHP+mysql数据库简单分页实例-sql分页
- PHP基础编程之鬼斧神工的正则表达式-正则表达式初探+常用的正则表达式函数
- php基础编程-php连接mysql数据库-mysqli的简单使用
- (数据科学学习手札91)在Python中妥善使用进度条
- MySQL 数据库表分区.
- RMI 远程方法调用
- MyBatis版本升级导致OffsetDateTime入参解析异常问题复盘
- 我靠(call) ,我的未来(Future)在哪里???
- Flutter中ListView加载图片数据的优化
- Python 实现随机森林预测宽带客户离网(附源数据与代码)
- 嘿,你知道新冠疫情现在什么样了吗?
- 关于双目立体视觉的三大基本算法及发展现状的总结
- 权限维持之打造不一样的映像劫持后门