HTMLElement: свойство anchorElement

Свойство anchorElement интерфейса HTMLElement возвращает ссылку на элемент якоря. Это работает только в случае элементов, связанных с их якорями через атрибут HTML anchor, а не с элементами, связанными с их якорями через свойства CSS anchor-name и position-anchor.

Для получения подробной информации о функциях и использовании якорей, см. страницу модуля позиционирования якорей CSS и руководство по использованию позиционирования якорей CSS.

Экземпляр HTMLElement, представляющий элемент якоря, или null , если его нет.

В этом примере элемент связывается с якорем в HTML, а JavaScript используется для получения ссылки на элемент якоря.

HTML

В HTML мы создаём элемент <div> с id example-anchor. Это будет наш элемент якоря. Затем мы включаем другой <div> с классом infobox и атрибутом anchor, установленным в значение example-anchor. Это обозначает первый <div> как якорь второго <div>, связывая их вместе.

Мы также включаем элемент <p> для вывода результатов.

<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

Мы используем JavaScript для получения ссылок на позиционированный элемент и элемент вывода, а затем выводим значение связанного id свойства anchorElement позиционированного элемента в вывод, показывая, что элемент якоря — это 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.`;
}

Результат

Результат следующий.

Этот атрибут в настоящее время не входит в спецификацию HTML. Прочитайте обсуждение добавления свойства anchorElement по адресу https://github.com/whatwg/html/pull/9144.

• Атрибут HTML anchor
• Свойства CSS anchor-name и position-anchor
• Модуль позиционирования якорей CSS
• Руководство по использованию позиционирования якорей CSS