JS中关于坐标的总结

最新推荐文章于 2024-01-29 15:00:00 发布
最新推荐文章于 2024-01-29 15:00:00 发布
阅读量402 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010780755/article/details/115008205
版权

MouseEvent
screenX: 鼠标相对屏幕的水平位置
screenY
clientX：鼠标相对于程序窗口的位置
clientY
movementX：与上一个mousemove事件之间的距离
movementY
offsetX：鼠标与目标节点左侧padding外边缘的距离
offsetY：
PageX：鼠标位置和文档左侧距离
PageY：文档上侧，包含不可见的部分
Element
Element.clientHeight:表示元素节点的css高度，包括padding，不包括border和margin，还要减去水平滚动条的位置
document.documentElement.clientHeight表示当前视口的高度，等于window.innerHeight的高度减去水平滚动条的高度；
document.body.clientHeight表示网页的总高度，包括不可见的部分

Element.scrollHeight表示当前元素总高度，包括溢出容器不可见的部分，包括padding和微元素的高度，不包括border margin和水平滚动条的位置

Element.scrollLeft Element.scrollTop表示网页向右向下翻的距离

Element.offsetLeft表示当前元素左上角相对与Element.offsetParent节点的水平位移,border左上角距离offsetPraent border左上角的距离

welding_artist
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript获取文档坐标和视口坐标
10-24
制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。下面的教程总结了Javascript在网页定位方面的相关知识。有需要的小伙伴可以参考下。
JS事件简单总结
野草园
03-04 490
这个其实不是很好描述，有可能是由用户发起的，比如鼠标事件，键盘事件，窗口事件，表单事件，也有可能是页面加载资源过程中的事件。常见的事件比如：click, dbclick, keydown, keypress, keyup, mousemove, wheel, scroll, focus, blur, load, unload, abort, error, resize, change, select, submit。
JavaScript 中那些关于坐标和距离的属性与方法
weixin_34365417的博客
05-27 213
一 前言 在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况，但是这些属性和方法众多，全部熟练地记下来并非是一件易事，大多只能现查，耗费不少时间精力，于是便有了整理记录的想法，即加深了印象，又方便随时查阅。 二 window 对象 浏览器里面，window 对象（注意，w为小写）指当前的浏览器窗口。 它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明...
js：事件对象中的7种坐标
彭世瑜的博客
11-18 2101
三大类： 相对于当前点击元素 相对于当前浏览器 相对于整个显示器 7种坐标 1、窗口坐标：clientX、clientY 相对于用户浏览器的左上角的xy坐标 也就是窗口坐标，不包括工具栏、滚动条 2、layerX、layerY 鼠标相对于目标元素最近的具有absolute/relative定位元素的位置，包含border 3、movementX、movementY 两个鼠标移动事件间隔中当中鼠标移动的相对坐标 4、offsetX、offsetY 相对你点击那个dom的左上角x、y坐标 5、文档坐标：pa
js拖拽效果的原理及实现
qq_43768678的博客
04-06 372
完成拖拽效果，需要了解几个鼠标坐标： 1、clientX： clientY： 点击的元素位置相对可视窗口左上角位置 2、 layerX: layerY: 如果目标元素没有定位 相对页面左上角位置 如果目标元素点位，则是相对目标元素左上角 3、offsetX: offsetY: 相对目标对象的左上角位置 4、 pageX: pageY: 点击位置相对页面的左上角位置 5、movementX: mov...
[js点滴]JavaScript事件详解
图解AI
11-13 9777
Event对象 目录 事件是一种异步编程的实现方式，本质上是程序各个组成部分之间的通信。DOM支持大量的事件，本节介绍DOM的事件编程。EventTarget接口DOM的事件操作（监听和触发），都定义在EventTarget接口。Element节点、document节点和window对象，都部署了这个接口。此外，XMLHttpRequest、AudioNode、AudioContext等浏览器内置对
three.js 3d坐标转平面坐标
02-08
总结来说，"three.js 3d坐标转平面坐标"涉及到将3D空间中的点或对象转换为适合在2D平面上显示的形式。这通常通过Three.js库提供的函数和自定义的坐标转换逻辑来完成，确保3D场景与网页上的2D元素完美结合。
javascript中floor使用方法总结
10-17
`Math.floor()` 在多种场景中都有应用，比如在计算时需要去除小数部分，或者在游戏编程中，当需要将角色的位置限制为网格上的整数坐标时。此外，它还可以与随机数结合使用，生成一个指定范围内的整数。例如，如果你...
JavaScript实现捕获鼠标坐标
10-15
在JavaScript中，捕获鼠标坐标是常见的需求，特别是在开发交互式网页或需要响应用户鼠标移动的场景下。通过监听鼠标移动事件，我们可以获取到鼠标的当前位置，从而进行相应的操作。本篇文章将详细介绍如何使用...
JS中坐标表示方法的异同
03-17
### JS中坐标表示方法的异同 #### 一、引言 JavaScript作为一种广泛使用的脚本语言，在Web开发中扮演着重要角色。对于前端开发者来说，理解鼠标事件中的坐标系统至关重要，因为这直接影响到用户交互的设计与实现。...
详细解析 JavaScript 获取元素的坐标
孤云博客
03-15 9526
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。 from：https://www.cnblogs.com/dong-xu/p/7150715.html?utm_source=tuicool&utm_medium=referral 详细解析 JavaSc...
PointerEvent中的movementX/movementY属性
zhengsr12345的博客
11-24 280
在使用PointerEvent过程中发现了一个有意思的属性，即movementX/movementY，该属性在mdn文档里说是相对于最后一次鼠标移动位置的位置，这个值一般不会很大，且会出现正负。在这里稍微提一下PointerEvent，该事件继承自MouseEvent，它集成了鼠标和触摸事件的优点，也就意味着它经过合理设置可以替代鼠标和触摸事件，具有良好的复用性和跨平台能力。它的用法大致上跟鼠标事件差不多但略有区别，具体可以参考mdn文档。
javascript学习之鼠标事件
白话机器学习
08-06 2855
WheelEvent 接口继承了 MouseEvent 实例，代表鼠标滚轮事件的实例对象。目前，鼠标滚轮相关的事件只有一个wheel事件，用户滚动鼠标的滚轮，就生成这个事件的实例。浏览器原生提供构造函数，用来生成WheelEvent实例。构造函数可以接受两个参数，第一个是字符串，表示事件类型，对于滚轮事件来说，这个值目前只能是wheel。第二个参数是事件的配置对象。该对象的属性除了EventUIEvent的配置属性以外，还可以接受以下几个属性，所有属性都是可选的。deltaX。
js 获取坐标
weixin_30511107的博客
07-23 2444
这两天没事干写了drag，弄了好久，主要是获取鼠标坐标，因为要兼容FF，所以遇到了不少问题，备忘一下 一、js获取坐标位置 1.1 首先是event，这个只有IE支持，FF不支持，所以如果FF里要用只能在函数上加多一个参数，例如function move(event)，这样就可以在函数里面用event了 1.2 获取坐标：event.X 和event.Y 这两个只支持IE，取出来值是相对...
JavaScript中的坐标
最新发布
爱蹦跶的全栈大A阿
01-29 1284
在我们的日常生活中，JavaScript已经成为了一种无处不在的编程语言。它的应用范围从简单的网页动画，到复杂的前端框架，再到后端的Node.js，甚至还包括物联网设备。然而，JavaScript并非一成不变，它一直在发展，一直在添加新的特性和功能。今天，我们将探讨JavaScript中的一个重要的概念：坐标。在这篇文章中，我们将详细介绍坐标，包括它的定义、使用方法，以及如何在不支持坐标的浏览器中进行polyfill。​。
JS各种距离和尺寸
qq_43653914的博客
11-09 425
距离/宽高： screen.width：屏幕的宽度 screen.height：屏幕的高度 element.style.width：当前对象的宽度。 element.style.height：当前对象的高度。 element.style.left：当前对象的left值。 element.style.top：当前对象的top值。 element.offsetParent：当前对象的最近的定位父级元素 element.offsetWidth：当前对象的宽度（width+padding+border） eleme
JS基础 空间坐标
wgchen
02-11 897
阅读目录视口与文档视口与文档尺寸几何尺寸方法列表getComputedStylegetBoundingClientRectgetClientRects坐标点元素元素集合底层元素滚动控制方法列表文档滚动位置元素滚动位置控制滚动使用 scrollBy 滚动文档使用 scroll 滚动到指定位置使用元素 scrollIntoView 方法实现滚动操作回到顶部漂浮广告 视口与文档 首先理解视口（窗口）与文档的含义 网页很多都是多屏（通过滚动条显示看不见的内容），所以文档尺寸一般大于视口尺寸 视口尺寸不包括浏览器工
javascript中常用坐标属性
张先生的前端日志
10-13 835
javascript中常用坐标属性 MouseEvent(鼠标事件)属性 都是MouseEvent对象下的属性，必须用该对象调用（只读） MouseEvent：当鼠标事件触发后都会产生此对象，该对象记录着鼠标触发事件时的所有属性 例图： 其常用的坐标属性有： clientX（clientY）   返回当事件被触发时鼠标指针相对于浏览器页面可视区域的水平坐标（left）、垂直坐标（top） 注意： 此属性不论页面是否有滚动条，光标所在浏览器可视区域的位置都是固定的（简单理解为你在浏览器中看到的内容，就是
js判断x，y的坐标
dengfengling999的博客
01-21 1070
把鼠标放入在盒子中，在下面盒子显示鼠标的坐标： 知识点： 事件对象： 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数 在事件的对象中封装了当前事件相关的一切信息，比如，鼠标的坐标、键盘的那个按键按下、鼠标滚轮滚动的方向 clientX可以获取鼠标指针的水平坐标 clientY可以获取鼠标的垂直坐标 在ie8及以下浏览器中，响应函数在触发时，浏览器不会传递事件对象，而是将事件对象作为window对象的属性 window.event 代码如下： <!D
JavaScript全方面总结：事件、按键、位置与更多
这篇总结涵盖了JavaScript中的多个关键知识点，包括事件处理、DOM操作、窗体交互、用户输入检测以及时间管理和对象查找等。以下是对这些内容的详细说明： 1. 事件源对象：在JavaScript中，事件源对象（event....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值