HTMLElement：anchorElement 属性

非标准：此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

实验性：这是一个实验性技术
在生产环境中使用之前，请仔细检查浏览器兼容性表。

anchorElement是HTMLElement接口的一个属性，它返回对元素的锚元素的引用。这仅适用于通过anchor HTML 属性与其锚点关联的元素，而不适用于通过 CSS 的anchor-name和position-anchor属性与其锚点关联的元素。

有关锚功能和用法的详细信息，请参阅CSS 锚定位模块着陆页和使用 CSS 锚定位指南。

值

表示元素锚元素的HTMLElement实例，如果没有锚元素则为null。

示例

基本用法

此示例在 HTML 中将一个元素与一个锚点关联，并使用 JavaScript 获取对锚点元素的引用。

HTML

在 HTML 中，我们创建一个具有example-anchor ID 的<div>元素。这将是我们的锚元素。然后，我们包含另一个<div>，其类为infobox，并且anchor属性设置为example-anchor。这将第一个<div>指定为第二个<div>的锚点，并将两者关联在一起。

我们还包括一个<p>元素，以将一些结果输出到其中。

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

我们使用 JavaScript 获取对定位元素和输出元素的引用，然后将定位元素的anchorElement属性关联的id的值打印到输出中，表明锚元素是定位元素的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 anchor 属性
CSS anchor-name 和 position-anchor 属性
CSS 锚定位模块
使用 CSS 锚定位指南

HTMLElement：anchorElement 属性

值

示例

基本用法

HTML

JavaScript

结果

规范

浏览器兼容性

另请参阅