HTMLImageElement.y

The read-only HTMLImageElement property y indicates the y-coordinate of the <img> element's top border edge relative to the root element's origin.

The x and y properties are only valid for an image if its display property has the computed value table-column or table-column-group. In other words: it has either of those values set explicitly on it, or it has inherited it from a containing element, or by being located within a column described by either <col> or <colgroup>.

Syntax

let imageY = htmlImageElement.y;

Value

An integer value indicating the distance in pixels from the top edge of the element's nearest root element to the top edge of the <img> element's border box. The nearest root element is the outermost <html> element that contains the image. If the image is in an <iframe>, its y is relative to that frame.

In the diagram below, the top border edge is the top edge of the blue padding area. So the value returned by y would be the distance from that point to the top edge of the content area.

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

Note: The y property is only valid if the computed value of the image's display property is either table-column or table-column-group; in other words, either of those are set directly on the <img> or they're inherited from a containing element or by being located within a column described by either <col> or <colgroup>.

Example

The example below demonstrates the use of the HTMLImageElement properties x and y.

HTML

In this example, we see a table showing information about users of a web site, including their user ID, their full name, and their avatar image.

<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://udn.realityripple.com/samples/d6/7ab36d79bb.jpg"</td>
  </th>
</table>
<pre id="log">
</pre>

JavaScript

The JavaScript code that fetches the image from the table and looks up its x and y values is below.

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

let log = msg => {
  logBox.innerHTML += `${msg}<br>`;
}

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

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

This uses the <table>'s rows property to get a list of the rows in the table, from which it looks up row 1 (which, being a zero-based index, means the second row from the top). Then it looks at that <tr> (table row) element's cells property to get a list of the cells in that row. The third cell is taken from that row (once again, specifying 2 as the zero-based offset).

From there, we can get the <img> element itself from the cell by calling querySelector() on the HTMLTableCellElement representing that cell.

Finally, we can look up and display the values of the HTMLImageElement's x and y properties.

CSS

The CSS defining the appearance of the table:

.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;
}

Result

The resulting table looks like this:

Specifications

Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'HTMLImageElement.y' in that specification.
Working Draft

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
yChrome Full support 1Edge Full support 12Firefox Full support 14
Full support 14
No support ? — 7
IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 14
Full support 14
No support ? — 7
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support
Full support
No support
No support