HTMLImageElement: x 属性

只读 HTMLImageElement 属性 x 指示 <img> 元素的左边界相对于根元素原点的 x 坐标。

x 和 y 属性仅在图像的 display 属性的计算值为 table-column 或 table-column-group 时才有效。换句话说：它要么显式地设置了这些值之一，要么从包含元素继承了它，要么位于由 <col> 或 <colgroup> 描述的列内。

值

一个整数，以像素为单位，表示元素最近的根元素的左边缘和 <img> 元素的边框盒的左边缘之间的距离。最近的根元素是包含图像的最外层 <html> 元素。如果图像位于 <iframe> 中，则其 x 相对于该框架。

在下图中，左边界是蓝色填充区域的左边缘。因此，x 返回的值将是该点到内容区域左边缘的距离。

Diagram showing the relationships between the various boxes associated with an element

注意：x 属性仅在图像的 display 属性的计算值为 table-column 或 table-column-group 时才有效；换句话说，要么直接在 <img> 上设置这些值，要么从包含元素继承，要么位于由 <col> 或 <colgroup> 描述的列内。

示例

以下示例演示了如何使用 HTMLImageElement 属性 x 和 y。

HTML

在这个示例中，我们看到一个表格显示了有关网站用户的信息，包括他们的用户 ID、全名和头像图像。

html
<table id="userinfo">
  <colgroup>
    <col span="2" class="group1">
    <col>
  </colgroup>
  <tr>
    <th>UserID</th>
    <th>Name</th>
    <th>Avatar</th>
  </tr>
  <tr>
    <td>12345678</td>
    <td>Johnny Rocket</td>
    <td><img src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg"></td>
  </th>
</table>
<pre id="log">
</pre>

JavaScript

从表格中获取图像并查找其 x 和 y 值的 JavaScript 代码如下。

js
const logBox = document.querySelector("pre");
const tbl = document.getElementById("userinfo");

const log = (msg) => {
  logBox.innerText += `${msg}\n`;
};

const cell = tbl.rows[1].cells[2];
const image = cell.querySelector("img");

log(`Image's global X: ${image.x}`);
log(`Image's global Y: ${image.y}`);

这使用 <table> 的 rows 属性来获取表格中行的列表，从中查找第 1 行（由于是基于 0 的索引，因此表示从顶部开始的第二行）。然后，它查看该 <tr>（表格行）元素的 cells 属性来获取该行中单元格的列表。从该行中获取第三个单元格（同样，指定 2 作为基于 0 的偏移量）。

从那里，我们可以通过对表示该单元格的 HTMLTableCellElement 调用 querySelector() 来从单元格中获取 <img> 元素本身。

最后，我们可以查找和显示 HTMLImageElement 的 x 和 y 属性的值。

CSS

定义表格外观的 CSS

css
.group1 {
  background-color: #d7d9f2;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(100 100 100);
  font-family: sans-serif;
}

td,
th {
  border: 1px solid rgb(100 100 100);
  padding: 10px 14px;
}

td > img {
  max-width: 4em;
}

结果

生成的表格如下所示

规范

规范
CSSOM View 模块
# dom-htmlimageelement-x

浏览器兼容性

BCD 表格仅在浏览器中加载