当前位置: 首页 > news >正文

html获取鼠标绝对坐标,JavaScript获取网页元素的绝对坐标

function findPosX(obj) {

var curleft = 0;

if (obj.offsetParent) { //返回父类元素,大多说offsetParent返回body

while (obj.offsetParent) {//遍历所有父类元素

curleft += obj.offsetLeft;//当前元素的左边距

obj = obj.offsetParent;

}

} else if (obj.x) curleft += obj.x;

return curleft;

}

function findPosY(obj) {

var curtop = 0;

if (obj.offsetParent) {

while (obj.offsetParent) {

curtop += obj.offsetTop;

obj = obj.offsetParent;

}

} else if (obj.y) curtop += obj.y;

return curtop;

}

function getPos(){

return {x:findPosX(document.getElementById("p36table")),y:findPosY(document.getElementById("p36table"))};

}

function showPos(){

var pos = getPos();

alert("x=="+pos.x+"y=="+pos.y);

}

src='#'>

测试获得坐标

43378839_1.gif

附注:

方法1:

function   getAbsPoint(e)

{

var   x   =   e.offsetLeft,   y   =   e.offsetTop;

while(e=e.offsetParent)

{

x   +=   e.offsetLeft;

y   +=   e.offsetTop;

}

alert("x:"+x+","+"y:"+y);

}

方法2:

function   getAbsPoint(obj)

{

var   x,y;

orect   =   obj.getBoundingClientRect();

x=oRect.left

y=oRect.top

alert("("+x+","+y+")")

}

JS中获得窗口属性的方法

1。获得屏幕的分辨率:

screen.width

screen.height

2。获得窗口大小:

document.body.clientWidth

document.body.clientHeight

3。获得窗口大小(包含Border、Scroll等元素)

document.body.offsetWidth

document.body.offsetHeight

020085513035.gif

相关文章:

  • 接口的无穷魅力
  • html手机网页适配 rem,移动端网页布局适配rem方案小结
  • html网页中图片展示为碎片,基于HTML代码实现图片碎片化加载功能
  • 自定义快捷键--向前/向后/全文搜索
  • 组装台式计算机需要哪些硬件,电脑硬件有哪些?组装一台电脑需要哪些配件详解...
  • linux系统一些信息(待整理)
  • html里设置选中过渡时间,HTML / CSS – 过渡选择器
  • Divide two integers without using multiplication, division and mod operator.
  • 在html5中您能够直接将,HTML5 基础测试题
  • CFLAGS CPPFLAGS CPPFLAGS 区别
  • 女生适合学的计算机语言,转行IT必看!你究竟适合学习哪种编程语言?
  • WampServer修改MySQL密码
  • 计算机的应用领悟是,理论知识:计算机应用基础课程学习领悟
  • npm用法
  • 几点计算机水平考试,全国计算机等级考试开始报名,这几点要注意
  • JS中 map, filter, some, every, forEach, for in, for of 用法总结
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • flask接收请求并推入栈
  • github指令
  • iOS 系统授权开发
  • Javascript基础之Array数组API
  • JavaScript设计模式系列一:工厂模式
  • js作用域和this的理解
  • Making An Indicator With Pure CSS
  • miniui datagrid 的客户端分页解决方案 - CS结合
  • nginx 配置多 域名 + 多 https
  • PAT A1120
  • Python 使用 Tornado 框架实现 WebHook 自动部署 Git 项目
  • Redis字符串类型内部编码剖析
  • spring cloud gateway 源码解析(4)跨域问题处理
  • 半理解系列--Promise的进化史
  • 工作手记之html2canvas使用概述
  • 前嗅ForeSpider中数据浏览界面介绍
  • 日剧·日综资源集合(建议收藏)
  • 如何用vue打造一个移动端音乐播放器
  • 使用阿里云发布分布式网站,开发时候应该注意什么?
  • 小程序滚动组件,左边导航栏与右边内容联动效果实现
  • 译有关态射的一切
  • ​​​​​​​​​​​​​​Γ函数
  • ​渐进式Web应用PWA的未来
  • ​中南建设2022年半年报“韧”字当头,经营性现金流持续为正​
  • $.ajax()参数及用法
  • (3)llvm ir转换过程
  • (MATLAB)第五章-矩阵运算
  • (附源码)springboot青少年公共卫生教育平台 毕业设计 643214
  • (附源码)springboot社区居家养老互助服务管理平台 毕业设计 062027
  • (六)c52学习之旅-独立按键
  • (免费领源码)Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐
  • (企业 / 公司项目)前端使用pingyin-pro将汉字转成拼音
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (算法)N皇后问题
  • (一)u-boot-nand.bin的下载
  • (转)C#开发微信门户及应用(1)--开始使用微信接口
  • (转)visual stdio 书签功能介绍
  • **CI中自动类加载的用法总结