HTMLElement: anchorElement property

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

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.

For detailed information on anchor features and usage, see the CSS anchor positioning module landing page and the Using CSS anchor positioning guide.

Value

An HTMLElement instance representing the element's anchor element, or null if it doesn't have one.

Examples

Basic usage

This example associates an element with an anchor in HTML, and uses JavaScript to retrieve a reference to the anchor element.

HTML

In 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.

html
<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.

js
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.

Specifications

This 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.

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
anchorElement
ExperimentalNon-standard

Legend

Tip: you can click/tap on a cell for more information.

No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
User must explicitly enable this feature.

See also