-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
147 lines (112 loc) · 4.21 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
---
title: "HTMLImageElement: x property"
short-title: x
slug: Web/API/HTMLImageElement/x
page-type: web-api-instance-property
browser-compat: api.HTMLImageElement.x
---
{{APIRef("HTML DOM")}}
The read-only {{domxref("HTMLImageElement")}} property
**`x`** indicates the x-coordinate of the
{{HTMLElement("img")}} element's left border edge relative to the root element's
origin.
The `x` and {{domxref("HTMLImageElement.y", "y")}} properties are only valid
for an image if its {{cssxref("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 {{HTMLElement("col")}}
or {{HTMLElement("colgroup")}}.
## 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 {{HTMLElement("img")}} element's border
box. The nearest root element is the outermost {{HTMLElement("html")}} element that
contains the image. If the image is in an {{HTMLElement("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](boxmodel-3.png)
> **Note:** The `x` property is only valid if the computed
> value of the image's {{cssxref("display")}} property is either
> `table-column` or `table-column-group`; in other words, either
> of those are set directly on the {{HTMLElement("img")}} or they're inherited from a
> containing element or by being located within a column described by either
> {{HTMLElement("col")}} or {{HTMLElement("colgroup")}}.
## Example
The example below demonstrates the use of the `HTMLImageElement` properties
{{domxref("HTMLImageElement.x", "x")}} and {{domxref("HTMLImageElement.y", "y")}}.
### HTML
In this example, we see a table showing information about users of a website,
including their user ID, their full name, and their avatar image.
```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
The JavaScript code that fetches the image from the table and looks up its
`x` and `y` values is below.
```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}`);
```
This uses the {{HTMLElement("table")}}'s {{domxref("HTMLTableElement.rows", "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
{{HTMLElement("tr")}} (table row) element's {{domxref("HTMLTableRowElement.cells", "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 {{domxref("Element.querySelector", "querySelector()")}} on the
{{domxref("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:
```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;
}
```
### Result
The resulting table looks like this:
{{EmbedLiveSample("Example", 600, 200)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}