使用 JS 向 <a> 标签添加属性
发布于2022-09-15 05:46 阅读(1197) 评论(0) 点赞(8) 收藏(5)
如上图所示，我试图在我的网页中的“一组特定”访问链接（li 标签内的链接）旁边打一个勾号（✓） 。
JS 在 HTML 中用于向 <a> 标记插入“已访问”属性。 我将此代码放在页脚中（在屏幕中显示链接之后）。这不起作用（我没有看到在 HTML 中创建的属性）。
localStorage.setItem('visited-'+window.location.pathname,true);
var links = document.querySelectorAll('#the-content > ul > li > a');
for (i=0;i<links.length;i++) {
var link = links[i];
if (link.host == window.location.host && localStorage.getItem('visited-' + link.pathname + '/')) {
link.dataset.visited=true;
}
}
CSS 代码
我可以确认此代码正在工作，就好像我为 <a> 标记手动创建属性一样，应用了样式。
article .the-content a[data-visited] {
border-bottom: 1px dashed orange;
}
article .the-content a[data-visited]:after {
content: ' ✓';
}
解决方案
link.dataset.visited=true;
link.setAttribute('data-visited', 'true');
该dataset属性仅操作 JavaScript 属性，但不影响 HTML 属性。有关差异的更多信息可以在这个问题中找到：HTML 中的属性和属性之间有什么区别？
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/411135/4a466045fdf483bbe306/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力