Javascript：如何更改页面中所有链接的样式？答案

【问题标题】：Javascript: how to change the style of all links in a page?Javascript：如何更改页面中所有链接的样式？
【发布时间】：2012-05-26 12:45:52
【问题描述】：

我正在尝试通过 Javascript 更改页面中所有链接的样式。

这两个我都试过了，但都没有成功：

document.links.style.cursor = "wait";
document.getElementsByTagName(a).style.cursor = "wait";

我做错了什么？

【问题讨论】：

标签： javascript hyperlink tags

【解决方案1】：

var allLinks = document.links || document.getElementsByTagName('a');
for(var n=0;n<allLinks ;n++)
    document.allLinks [n].style.cursor = "wait";

document.links 是一个元素数组，所以document.links.style.cursor = "wait" 等于[link1,link2].links.style.cursor = "wait"。
关于document.getElementsByTagName(a)：语法错误，你忘记了引号。正确的是document.getElementsByTagName("a")

【讨论】：

【解决方案2】：

var style = document.createElement("style");
document.head.appendChild(style);
try {
  style.innerHTML = "a { cursor: wait; }";
}
catch (_ie) {
  style.styleSheet.cssText = "a { cursor: wait; }";
}

当然，您也可以提前计划需要更改链接的可能性，并像这样预加载静态样式表：

.wait-links a { cursor: wait; }

然后，每当您将“wait-links”类添加到<body>（或您喜欢的任何容器）时，<a> 标签都会受到影响。这比迭代更改其各自样式的元素（可能）要有效得多，尽管如果链接不多，这可能无关紧要。

在我看来，对这些事情使用样式表是一种更好的做法。实际上，在这种情况下，最好不要将类称为“等待链接”，而是使用一些描述实际发生的事情的词或词。然后你的 JavaScript 代码只是通过添加（或删除）类来确定情况，样式表控制外观的变化。如果您决定在某些情况下需要链接更改颜色或变得不可见，您可以这样做，而无需在脚本中寻找样式更改。

【讨论】：

【解决方案3】：

使用 JQuery 和“.css”方法消除了对 for 循环的需要并简化了代码。

$('a').css("cursor","wait");

【讨论】：