HTMLButtonElement : propriété interestForElement
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
La propriété interestForElement de l'interface HTMLButtonElement obtient ou définit l'élément cible d'un invocateur d'intérêt (interest invoker), lorsque l'élément HTML <button> associé est défini comme invocateur d'intérêt.
Voir Création d'un invocateur d'intérêt pour plus de détails.
Valeur
Une instance d'objet Element, ou null si l'élément <button> associé n'a pas d'élément cible défini.
Exemples
Exemple simple d'utilisation de interestForElement
Dans cet exemple, nous utilisons la propriété interestForElement d'un élément <button> pour définir son élément cible, puis récupérer le tagName de cet élément. Le tagName est ensuite affiché dans le contenu texte de l'élément <button>.
HTML
Le balisage inclut un élément <button> et un élément <div>. Nous transformons l'élément <div> en popover en lui ajoutant l'attribut popover.
<button href="#">a button</button>
<div id="mypopover" popover>I am a <code><div></code> element.</div>
JavaScript
On récupère des références aux éléments <button> et <div> dans le script, puis on crée la relation invocateur d'intérêt ↔ élément cible entre le <button> et le <div> en affectant à la propriété interestForElement du <button> une référence vers le <div>. On définit ensuite le contenu texte du bouton sur une chaîne contenant le tagName de l'élément cible, obtenu via invoker.interestForElement.tagName.
const invoker = document.querySelector("button");
const popover = document.querySelector("div");
invoker.interestForElement = popover;
invoker.textContent = `Mon élément cible est un ${invoker.interestForElement.tagName}`;
Résultat
L'exemple se rend ainsi :
Essayez de montrer de l'intérêt pour le bouton (par exemple au survol ou au focus) pour faire apparaître le <div>.