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

Question

我正在寻找一种方法来搜索任何具有“#”href 的链接并更改它们的 CSS 样式以使这些链接具有不同的颜色。本质上，我希望能够轻松识别哪些链接已损坏，哪些未损坏。

这用于大型文档项目，但尚未上传所有文件。我希望用户能够轻松识别哪些链接有效，哪些无效。这可以用Javascript以某种方式完成吗？

Answer 1

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

但是，您可以使用基于元素的 href 属性来查询元素document.querySelectorAll。

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

Answer 2

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

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
    }
}

Answer 3

在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
    }
}

Answer 4

我知道这是一个老问题，但这个问题需要一个不需要 JavaScript 的答案 - 基于纯 CSS 的 href 样式链接更有效。

此 CSS 样式所有链接的 href 为“#”红色：

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