HTMLElement: thuộc tính anchorElement
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.
Thuộc tính anchorElement của giao diện HTMLElement trả về tham chiếu đến phần tử neo của phần tử. Thuộc tính này chỉ hoạt động đối với các phần tử được liên kết với neo thông qua thuộc tính HTML anchor, không áp dụng cho các phần tử được liên kết với neo qua thuộc tính CSS anchor-name và position-anchor.
Giá trị
Một đối tượng HTMLElement đại diện cho phần tử neo của phần tử, hoặc null nếu không có.
Ví dụ
Sử dụng cơ bản
Ví dụ này liên kết một phần tử với một neo trong HTML, rồi dùng JavaScript để lấy tham chiếu đến phần tử neo.
HTML
Trong HTML, chúng ta tạo một phần tử <div> với id là example-anchor. Đây sẽ là phần tử neo. Tiếp theo, chúng ta thêm một <div> khác với class là infobox và thuộc tính anchor được đặt thành example-anchor. Điều này chỉ định <div> đầu tiên là neo của <div> thứ hai, liên kết chúng lại với nhau.
Chúng ta cũng thêm một phần tử <p> để hiển thị kết quả.
<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
Chúng ta dùng JavaScript để lấy tham chiếu đến phần tử được định vị và phần tử đầu ra, sau đó in giá trị id của thuộc tính anchorElement của phần tử được định vị ra đầu ra, cho thấy phần tử neo là anchorElement của phần tử được định vị.
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.`;
}
Kết quả
Kết quả như sau.
Thông số kỹ thuật
Thuộc tính này hiện chưa thuộc đặc tả HTML. Đọc thảo luận về việc thêm thuộc tính anchorElement tại https://github.com/whatwg/html/pull/9144.
Tương thích trình duyệt
Xem thêm
- Thuộc tính HTML
anchor - Thuộc tính CSS
anchor-namevàposition-anchor - Module định vị neo CSS