Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The anchorElement
property of the HTMLElement
interface returns a reference to the element's anchor element. This works only in the case of elements associated with their anchors via the anchor
HTML attribute, not elements associated with their anchors via the CSS anchor-name
and position-anchor
properties.
An HTMLElement
instance representing the element's anchor element, or null
if it doesn't have one.
This example associates an element with an anchor in HTML, and uses JavaScript to retrieve a reference to the anchor element.
HTMLIn the HTML, we create a <div>
element with an id
of example-anchor
. This will be our anchor element. We then include another <div>
with a class of infobox
and an anchor
attribute set to example-anchor
. This designates the first <div>
as the anchor of the second <div>
, associating the two together.
We also include a <p>
element to output some results into.
<div class="anchor" id="example-anchor">âï¸</div>
<div class="infobox" anchor="example-anchor">
<p>This is an information box.</p>
</div>
<p class="output"></p>
JavaScript
We use JavaScript to get references to the positioned element and the output element, and then print the value of the positioned element's anchorElement
property's associated id
to the output, showing that the anchor element is the positioned element's anchorElement
.
const posElem = document.querySelector(".infobox");
const outputElem = document.querySelector(".output");
try {
outputElem.textContent = `The positioned element's anchor element is the ${posElem.anchorElement.id}.`;
} catch (e) {
outputElem.textContent = `Your browser doesn't support the anchorElement property.`;
}
Result
The result is as follows.
SpecificationsThis attribute is not currently part of the HTML specification. Read the discussion about adding the anchorElement
property at https://github.com/whatwg/html/pull/9144.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4