HTMLImageElement.x

The read-only HTMLImageElement property x indicates the x-coordinate of the  <img> element's left 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 imageX = htmlImageElement.x;

Value

An integer value indicating the distance in pixels from the left edge of the element's nearest root element and the left 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 x is relative to that frame.

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

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

Note: The x 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://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.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.x' in that specification.
Working Draft

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
xChrome 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 ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown