重置 html 鏈接屬性

Question

我的 html 中有以下行

<a href="img/1.jpg" data-role="trigger" data-url="img/1.jpg">a link </a>

然后我使用 chrome dev 控制台將屬性data-url更改為另一個鏈接。 之后我可以以某種方式將此鏈接重置為其默認值嗎？ 我見過一個reset()函數，但我想它對這個問題不起作用。

Answer 1

存儲在另一個屬性中

 const anc = document.getElementById("anc1"); anc.dataset.saveurl = anc.dataset.url; anc.dataset.url="otherurl";

 <a href="img/1.jpg" id="anc1" data-role="trigger" data-url="img/1.jpg">Click</a>

結果：

<a href="img/1.jpg" id="anc1" data-role="trigger" data-url="otherurl" data-saveurl="img/1.jpg">Click</a>

Answer 2

WeakMap的另一個完美用例！ 🎉🎉🎉

 const wm = new WeakMap() document.querySelectorAll('button').forEach(el => { wm.set(el, el.dataset.url) delete el.dataset.url el.onclick = () => { console.log('html:', el.outerHTML, '\\nweakmap:', wm.get(el)) } })

 <button data-url="img/1.jpg">Click</button> <br> <button data-url="img/2.jpg">Click</button> <br> <button data-url="img/3.jpg">Click</button>