重置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

WeakMaps的另一个完美用例！

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>