如何在java script dom中更改已访问锚点链接的颜色
如何在java script dom中更改已访问锚点链接的颜色
提问于 2018-10-07 02:47:57
我在Dom中有个问题。我想在alreadyRead (布尔值)的基础上更改访问过的链接的颜色。我是这个领域的新手，所以如果我做错了什么，请原谅我。这是我的代码片段。提前感谢！
var books = [
{
title: 'The Design of EveryDay Things',
author: 'Don Norman',
alreadyRead: false
},
{
title: 'The Most Human Human',
author: 'Brian Christian',
alreadyRead: true
}
];
var appHandle = document.getElementById('app');
var ulTag = document.createElement('ul')
books.forEach(book =>{
if(book.alreadyRead === true){
document.linkcolor="green"
} else{
document.linkcolor ="red"
}
var liTag = document.createElement('li');
var navList =document.createTextNode(`${book.title} by ${ book.author}`)
var aTag = document.createElement('a')
aTag.setAttribute('href','#');
aTag.appendChild(navList)
liTag.appendChild(aTag);
ulTag.appendChild(liTag);
})
appHandle.appendChild(ulTag)回答 1
Stack Overflow用户
发布于 2018-10-07 02:59:45
在最简单的情况下，您可以使用下面这行代码实现您似乎想要的结果：
aTag.classList.toggle('alreadyRead', book.alreadyRead);根据类名后面的开关，该行使用Element.classList API在相关的aTag元素节点上切换alreadyRead类名。如果开关返回true，则添加类(如果不存在)，或者如果开关返回false，则删除类名(如果存在)。
var books = [{
title: 'The Design of EveryDay Things',
author: 'Don Norman',
alreadyRead: false
},
{
title: 'The Most Human Human',
author: 'Brian Christian',
alreadyRead: true
}
];
var appHandle = document.getElementById('app');
var ulTag = document.createElement('ul')
books.forEach(book => {
var liTag = document.createElement('li');
var navList = document.createTextNode(`${book.title} by ${ book.author}`);
var aTag = document.createElement('a')
aTag.setAttribute('href', '#');
aTag.appendChild(navList)
liTag.appendChild(aTag);
ulTag.appendChild(liTag);
aTag.classList.toggle('alreadyRead', book.alreadyRead);
})
appHandle.appendChild(ulTag).alreadyRead {
color: limegreen;
}<div id="app"></div>
参考文献：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52682290
复制相关文章
相似问题