Javascript offsetY 属性

2025 年 3 月 18 日 | 3 分钟阅读

Javascript offsetY 属性用于显示给定元素的 y 坐标或高度。只读的 MouseEvent offsetY 属性返回鼠标光标相对于目标元素的 y 坐标。我们可以将事件函数添加到 div 标签、网页或其他元素上来显示 y 坐标。

语法

以下语法适用于 offset 函数。我们可以获取给定元素的垂直值。

<script>
var  variable_name = event.offsetY;
</script>

返回值

它返回一个以像素为单位的数字，表示鼠标指针的垂直坐标。

示例

以下示例显示了给定元素的 y 坐标。

示例 1

以下示例显示了段落 元素的**高度或 y 坐标**。这些坐标与函数和鼠标光标配合使用。该属性显示鼠标光标在元素上的高度。

<!DOCTYPE html>
<html>
<body>
<h3>The JavaScript offsetY Property for mouse event </h3>
<p> Javascript offset property displays the y-coordinates or height of the given element. </p>
<p> The Example displays bordered box of the paragraph </p>
<p> Click inside the bordered box anywhere to get the y-coordinate of the mouse cursor. </p>
<p onclick = "myEvent(event)" style = "border : 2px solid black; height : 130px"></p>
<p id = "values" style = "color:red;"></p>
<script>
function myEvent(event) {
  let x = event.offsetY;
  document.getElementById("values").innerHTML = "The paragraph elements y-coordinate is: " + x;
}
</script>
</body>
</html>

输出

图像显示了段落 元素的 y 坐标。

示例 2

以下示例显示了段落元素的 y 坐标。此属性与函数和鼠标光标配合使用。该属性在警报框中显示鼠标光标以上的高度。

<!DOCTYPE html>
<html>
<body>
<h3>The JavaScript offsetY Property for mouse event </h3>
<p> Javascript offset property displays the y-coordinates or height of the given element. </p>
<p> The Example displays bordered box of the paragraph </p>
<p> Click inside the bordered box anywhere to get the y-coordinate of the mouse cursor. </p>
<p onclick = "myEvent(event)" style = "border : 2px solid black; height : 130px"></p>
<p id = "values" style=""> the data displays on the alert box</p>
<script>
function myEvent(event) {
  let x = event.offsetY;
  alert("The paragraph elements y-coordinate is: " + x);
}
</script>
</body>
</html>

输出

图像显示了段落 元素的 y 坐标。

Example3

以下示例显示了 body 元素的 y 坐标。此属性与函数和鼠标光标配合使用。该属性在警报框中显示鼠标光标以上的高度。

<!DOCTYPE html>
<html>
<body onclick = "myEvent(event)">
<h3>The JavaScript offsetY Property for mouse event </h3>
<p> Javascript offset property displays the y-coordinates or height of the given element. </p>
<p> The Example displays bordered box of the paragraph </p>
<p> Click inside the bordered box anywhere to get the y-coordinate of the mouse cursor. </p>
<script>
function myEvent(event) {
  let x = event.offsetY;
  console.log("The paragraph elements y-coordinate is: " + x);
}
</script>
</body>
</html>

输出

图像显示了段落 元素的 y 坐标。

Example4

以下示例显示了整个网页的**高度或 y 坐标**。这些坐标与函数和鼠标光标配合使用。该属性显示鼠标光标在 <html> 标签以上的高度。

<!DOCTYPE html>
<html onclick = "myEvent(event)">
<body>
<h3>The JavaScript offsetY Property for mouse event </h3>
<p> Javascript offset property displays the y-coordinates or height of the given element. </p>
<p> The Example displays bordered box of the paragraph </p>
<p> Click inside the bordered box anywhere to get the y-coordinate of the mouse cursor. </p>
<p id = "values" style="color:red;"></p>
<script>
function myEvent(event) {
  let x = event.offsetY;
  document.getElementById("values").innerHTML = "The paragraph elements y-coordinate is: " + x;
}
</script>
</body>
</html>

输出

图像显示了段落 元素的 y 坐标。

支持的 Web 浏览器

以下浏览器及其版本支持 offset 属性。

Opera 12.1 或更高版本
Internet Explorer 9 及以上版本
Google Chrome 1 及以上版本
Edge 12 或更高版本
Firefox 39 及以上版本
Apple Safari 1 及以上版本

结论

offsetY 属性有助于获取给定元素的高度或 y 坐标。它帮助用户和开发人员获得响应式函数。它用于获取从初始位置到鼠标光标的确切高度。

下一主题JavaScript onunload 事件

Javascript offsetY 属性

语法

支持的 Web 浏览器

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

Javascript offsetY 属性

语法

支持的 Web 浏览器

结论

相关帖子

JavaScript 执行上下文

Lodash_.chain() 方法

Javascript regexp 前瞻

如何使用 JavaScript 创建图像映射

移除数组中的重复项

JavaScript 中的回调地狱 (Callback Hell)

JavaScript 中的斐波那契数列

JavaScript Blob

JavaScript NaN 函数

JavaScript onmousewheel 事件

订阅 Tpoint Tech

联系信息

关注我们

教程