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.
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
See HTMLImageElement.x for example code that demonstrates the use of the HTMLImageElement.y (and HTMLImageElement.x).
Specifications
| Specification |
|---|
| CSSOM View Module (CSSOM View) # dom-htmlimageelement-y |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
y |
1 |
12 |
14
1-7
|
No |
≤12.1 |
3 |
1 |
Yes |
14
4-7
|
≤12.1 |
1 |
Yes |
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/y