Javascript:如何更改页面中所有链接的样式

Javascript: how to change the style of all links in a page?

本文关键字：链接 样式 何更改 Javascript      更新时间：2023-09-26

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

我尝试了这两种方法，但没有成功：

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

我做错了什么？

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") 

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

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

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

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

$('a').css("cursor","wait");
相关文章：