javascript获取窗口位置、绝对位置、事件位置等
有段时间没更新博客了,工作实在太忙了,加班加班再加班就是我们这个行业的常态吧、、、还好最近把工作进度完成了,终于有些空余时间了。关于《Javascript高级程序设计》系列,我并没有弃坑,只不过最近在把这本书读第二遍,主要针对一些第一遍没看懂的部分,完成之后我会继续更新的。
这篇文字主要一下三方面内容:
一、javascript获取事件位置
二、Javascript获取dom对象位置
三、Javascript获取绝对坐标
四、浏览器相对桌面位置
一、javascript获取事件位置
首先上图,这个图片是我在网上找到的,感觉做的比较好!
事件的位置主要涉及clientX,clientY,screenX,screenY,offsetX,offsetY 。
1.1 offsetX,offsetY
鼠标相对于事件源元素(srcElement)的X,Y坐标。
1.2 event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
1.3 event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。标准事件和IE事件都定义了这2个属性。
二、Javascript获取dom对象位置
关于clientWidth offsetWidth scrollWidth 等的含义
offsetWidth(width+padding+border)
当前对象的宽度。
style.width也是当前对象的宽度(width+padding+border)。
区别:
1)style.width返回值除了数字外还带有单位px;
2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值;
3)如果没有给 HTML 元素指定过 width样式,则 style.width 返回的是空字符串;
offsetHeight :(Height+padding+border)
当前对象的高度。
style.height也是当前对象的高度(height+padding+border)。
区别:
1)style.height返回值除了数字外还带有单位px;
2)如对象的高度设定值为百分比高度,则无论页面变高还是变矮,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值;
3)如果没有给 HTML 元素指定过 height样式,则 style.height返回的是空字符串;
clientWidth: 获取对象可见内容的宽度,不包括滚动条,不包括边框;
clientHeight: 获取对象可见内容的高度,不包括滚动条,不包括边框;
三、Javascript获取绝对坐标
直接获取页面元素绝对位置的js函数
var p = $("#DoSum");var offset = p.offset();alert(offset.left);alert(offset.top); //获取元素的纵坐标 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(),这个也可以获得绝对坐标
x=oRect.left
y=oRect.top
四、浏览器相对桌面位置
clientWidth是对象看到的宽度(不含边线,即border)
scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间距离,如有padding,就是左padding和右padding之间距离)。
offsetWidth是指对象自身的宽度,整型,单位像素(含边线,如滚动条的占用的宽,值会随着内容的输入而不断改变)。
clientWidth: 获取对象可见内容的宽度,不包括滚动条,不包括边框;
clientHeight: 获取对象可见内容的高度,不包括滚动条,不包括边框;
转载于:https://www.cnblogs.com/qixinbo/p/7052808.html
javascript获取窗口位置、绝对位置、事件位置等相关推荐
- JavaScript获取文本框光标的像素位置(转载)
[简介]本文主要实现获取textarea和input光标的像素位置,即光标的offsetLeft与offsetTop.可实现如下效果: 首先说明一下,在网上搜到的很多代码是如何获取输入光标位置的如下代 ...
- javascript获取窗口和div位置
1 事件获取 事件的位置主要涉及clientX,clientY,screenX,screenY,offsetX,offsetY . 1.1offsetX,offsetY 鼠标相对于事件源元素(srcE ...
- 跨浏览器用javascript获取窗口的位置和大小
跨浏览器获取位置 var leftX = typeof window.screenLeft == 'number' ? window.screenLeft : window.screenX; var ...
- mfc 获取窗口在屏幕中的位置_CSocket与CAsynSocket中的阻塞与非阻塞
1 上节回顾 上一节讲到,同步的内涵是函数返回时,任务已经完成.隐含的意思便是如果一方执行比较慢,是需要另一方等待的.阻塞的第二层含义便是"等待",从这个意义上讲,同步与阻塞是对同 ...
- javascript获取事件源对象和产生事件的对象
事件源对象是指event对象,其封装了与事件相关的详细信息,比如按键状态. 获取事件源对象的方法: 1 <!doctype html> 2 <html lang="en&q ...
- 用 javascript 获取当页面上鼠标(光标)位置
用 javascript 获取当页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等.当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理 ...
- C# API之常用操作窗口类函数详解[查找所有窗口、获取目标句柄的类名、获取窗口文本、获取当前活动窗口、通过窗口句柄获取线程ID、获取指定窗口位置]
/// <summary>/// 查找所有窗口(只要是在进程里面的)/// 如果不限制类名或者标题使用null代替/// </summary>/// <param nam ...
- qt获取窗口的右上角位置_如何获得 Qt窗口部件在主窗口中的位置--确定鼠标是否在某一控件上与在控件上的位置...
用Qt Creator 设计程序时,最方便的就是ui设计器,可以很容易的得到想要的布局. 但是这样自动布局带来的后果是很难知道窗口中某一部件在主窗口中的相对位置. 在处理子窗口鼠标事件时变的很麻烦.主 ...
- 原生js--兼容获取窗口滚动条位置和窗口大小的方法
各个浏览器对获取获取窗口滚动条位置和窗口大小没有提供统一的API,以下是对其封装,解决兼容性问题 /** * 获取浏览器视口的大小(显示文档的部分) * */ function getViewP ...
最新文章
- oracle导入excel字段超过4000字符数据_产品思考:B端产品中,为什么批量导入功能很重要?...
- java 级联下拉列表_java 下拉框级联(年月日级联)
- python字典导入mongodb_python连接mongoDB进行数据提取→常用操作指南
- error: Your local changes to the following files would be overwritten by merge:
- 【Vegas原创】Can't connect to X11 window server using ':0.0' 解决方法
- 树莓派4b连接手机热点wifi及远程桌面连接
- pdf文件如何生成目录 wps_wps怎么制作pdf文档 wps快速制作pdf文档方法教程
- VS安装包注册com组件
- zabbix 利用脚本发邮件(mail)
- VScode使用element-ui插件准备
- oracle最小值寒素,新人教版备考2020年浙江中考语文复习专题:基础知识与古诗文专项特训(五十六)D卷...
- kafka数据保存时间问题与kafka的性能测试
- 为Dragonfly配置私有仓库
- 栀子花怎么养 栀子花的养殖方法和注意事项
- Paper Reading - 基础系列 - 常用评价指标 ROC、PR、mAP
- 如何在web端登录企业邮箱? 163企业邮箱怎么登陆?
- 如何关闭 Linux 中的嘟嘟声
- OpenSSL ssL_read: Connection was aborted,errno 10053 报错
- 行走自由的扫地机器人,可能正在偷偷监听你
- 从输入一个URL地址到浏览器完成渲染的整个过程