HTMLImageElement: свойство x

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Только для чтения HTMLImageElement свойство x указывает координату x левого края границы элемента <img> относительно начала координат корневого элемента.

Свойства 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

В этом примере показана таблица с информацией о пользователях веб-сайта, включая их идентификатор пользователя, полное имя и аватар.

<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

Ниже приведен код JavaScript, который извлекает изображение из таблицы и ищет значения x и y.

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>'s rows для получения списка строк в таблице, из которого выбирается строка 1 (поскольку индексация с нуля означает вторую строку сверху). Затем он обращается к свойству <tr> (строка таблицы) элемента cells, чтобы получить список ячеек в этой строке. Третья ячейка берется из этой строки (снова, 2 используется как сдвиг с нуля).

Из этой ячейки элемент <img> можно получить, вызвав querySelector() для HTMLTableCellElement, представляющего эту ячейку.

Наконец, мы можем получить и отобразить значения свойств HTMLImageElement x и y.

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 Module # dom-htmlimageelement-x

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`x`	1	12	141–7	≤12.1	3	18	144–7	≤12.1	1	1.0	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/x