根据链接的HREF包含的内容更改CSS样式

我正在寻找一种方法来搜索任何具有“＃”参数的链接，并更改它们的CSS样式以使这些链接具有不同的颜色。本质上，我希望能够轻松识别哪些链接被破坏，哪些不是。根据链接的HREF包含的内容更改CSS样式

这是用于一个大规模的文档项目，并不是所有的文件都上传了。我希望用户能够轻松识别哪些链接工作，哪些不会。这是否能够用JavaScript以某种方式完成？

2013-11-03 user2948894

建议增加或改变类，而不是内嵌样式....远远维护 – charlietfl

^^ +1好主意 – 2013-11-03 00:34:31

您需要遍历页面上的所有链接，单独检查它们并根据需要更改样式。这里有一个起点，为您拓展从：

var anchors = document.getElementsByTagName('a'); //Get all the links 
for(var i = 0; i < anchors.length; i++) { //Loop through links 
    if(anchors[i].href === '#') { //If link points to "href", 
     anchors[i].style.color = 'red'; //then change the link's color to red 
    } 
}

来源

2013-11-03 00:15:44 sushain97

在JavaScript，你可以做不知何故像以下：

var els = document.getElementsByTagName("a"); 
for (var i = 0, l = els.length; i < l; i++) { 
    var el = els[i]; 
    if (el.href === '#') { 
     //do something here 
    } 
}

来源

2013-11-03 00:15:56 jandresrodriguez

我认为这是错误的做法。你可能应该有一个服务器端进程来解析你的文件并修复/识别断开的链接，而不是在运行时使用JavaScript来完成。

但是，您可以使用document.querySelectorAll根据它们的href属性查询元素。

[].forEach.call(document.querySelectorAll('a[href="#"]'), function (link) { 
    link.style.color = 'red'; //change style 
});

来源

2013-11-03 00:18:37 plalx

+1改进。 'forEach'有其优点。 – 2013-11-03 00:33:11

@Jeffman你让我意识到我忘记了这是一个'NodeList'，而不是一个数组;）forEach是一个很好的syntaxic糖，但速度较慢，但是对于一些迭代，它并不重要。 – plalx

哈哈。跟进+1。 – 2013-11-03 00:48:48

我知道这是一个老问题，但这个问题需要不需要JavaScript的一个答案 - 根据它们与纯CSS的href风格的链接是更有效的。

这个CSS样式以“＃”红色的HREF各个环节：

a[href="#"] { 
    color: red; 
}

来源

2015-11-04 10:38:28 laurencedorman

根据链接的HREF包含的内容更改CSS样式

回答

相关问题