Javascript offsetX 属性

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

JavaScript offset 属性显示特定元素的 x 坐标或宽度。只读的 MouseEvent offsetX 属性返回目标元素上鼠标光标的 x 坐标。我们可以为 div 标签、网页或其他元素添加事件函数来显示 x 坐标。

语法

以下语法适用于 offsetX 函数。我们可以获取特定元素的水平值。

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

返回值

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

示例

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

示例 1

以下示例显示了段落 元素的宽度或 x 坐标。这些坐标与函数和鼠标光标一起工作。该属性显示到元素上鼠标光标的宽度。

<!DOCTYPE html>
<html>
<body>
<h3>The JavaScript offsetX Property for mouse event </h3>
<p> Javascript offset property displays the x-coordinate or width of the specific element. </p>
<p> The Example displays bordered box of the paragraph </p>
<p> Click inside the bordered box anywhere to get the x-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.offsetX;
  document.getElementById("values").innerHTML = "The paragraph elements x-coordinate is: " + x;
}
</script>
</body>
</html>

输出

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

示例 2

以下示例显示了段落元素的 x 坐标。此属性与函数和鼠标光标一起工作。该属性在警报框中显示到鼠标光标的宽度。

<!DOCTYPE html>
<html>
<body>
<h3>The JavaScript offsetX Property for mouse event </h3>
<p> Javascript offset property displays the x-coordinates or width of the specific element. </p>
<p> The Example displays bordered box of the paragraph </p>
<p> Click inside the bordered box anywhere to get the x-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.offsetX;
  alert("The paragraph elements x-coordinate is: " + x);
}
</script>
</body>
</html>

输出

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

Example3

以下示例显示了 body 元素的 x 坐标。此属性与函数和鼠标光标一起工作。该属性在警报框中显示到鼠标光标的宽度。

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

输出

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

Example4

以下示例显示了整个网页的宽度或 x 坐标。这些坐标与函数和鼠标光标一起工作。该属性显示到 <html> 标签鼠标光标的宽度。

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

输出

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

支持的 Web 浏览器

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

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

结论

offsetX 属性有助于获取特定元素的宽度或 x 坐标。它有助于用户和开发人员获得响应式函数。它能够获取从初始位置到鼠标光标的确切宽度。

下一个主题JavaScript offsetY 属性

Javascript offsetX 属性

示例

支持的 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 offsetX 属性

示例

支持的 Web 浏览器

结论

相关帖子

JavaScript string repeat() 方法

如何在 JavaScript 中将对象转换为数组

preventDefault() 和 stopPropagation() 方法之间的区别

JavaScript 中的 mousemove 事件

JavaScript 一等公民函数

从 JavaScript 的 select 列表中移除选项

JavaScript 执行上下文

如何使用 JavaScript 创建动态表格

JavaScript 一元运算符

如何使用 JavaScript 绘制一条线

订阅 Tpoint Tech

联系信息

关注我们

教程