SVGAElement: thuộc tính interestForElement
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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.
Thuộc tính interestForElement của giao diện SVGAElement lấy hoặc đặt phần tử đích của một interest invoker, trong trường hợp phần tử <a> liên kết được chỉ định là một interest invoker.
Xem Tạo một interest invoker để biết thêm chi tiết.
Giá trị
Một phiên bản đối tượng Element, hoặc null nếu phần tử <a> liên kết không có phần tử đích được đặt.
Ví dụ
Cách sử dụng cơ bản của interestForElement
Trong ví dụ này, chúng ta sử dụng thuộc tính interestForElement của phần tử SVG <a> để đặt phần tử đích của nó, sau đó lấy tagName của phần tử đích. tagName sau đó được đưa vào nội dung văn bản của phần tử <a>.
HTML
Đánh dấu chứa một phần tử SVG <a> với phần tử <text>, và văn bản liên kết được đưa vào trong phần tử <text>. Ngoài ra còn có một phần tử HTML <div>. Chúng ta biến phần tử <div> thành popover bằng cách đặt thuộc tính popover trên nó.
<svg>
<a href="#">
<text x="90" y="20" text-anchor="middle">A link</text>
</a>
</svg>
<div id="mypopover" popover>I am a <code><div></code> element.</div>
JavaScript
Chúng ta lấy tham chiếu đến các phần tử <a>, <text> và <div> trong script. Sau đó, chúng ta tạo mối quan hệ interest invoker-target giữa <a> và <div> bằng cách đặt thuộc tính interestForElement của phần tử <a> bằng với tham chiếu đến <div>. Sau đó, chúng ta cập nhật nội dung <text> để hiển thị tagName của phần tử đích, được lấy qua invoker.interestForElement.tagName.
const invoker = document.querySelector("a");
const invokerText = document.querySelector("text");
const popover = document.querySelector("div");
invoker.interestForElement = popover;
invokerText.textContent = `My target is a ${invoker.interestForElement.tagName} element`;
Kết quả
Ví dụ hiển thị như sau:
Thử thể hiện sự quan tâm đến liên kết (ví dụ: bằng cách di chuột hoặc focus vào nó) để làm cho <div> xuất hiện.