如何使用javascript更改链接的颜色？

Question

我想知道如何使用 javascript 操作页面上的所有链接。我可以通过document.getElementById(id) 的id 获取元素，但我怎样才能获取链接？还有我怎样才能获得具有某个classname 的所有元素？我想改变链接和类元素的颜色。

我的意思是这些链接：

<a href="http://www.google.com">This is a link</a>

还有一个带有类的元素示例：

<span class="link">This is an element with a class</span>

请不要使用 jquery。我想要 javascript。

Answer 1

这就是我更改所有超链接颜色的方式（正常/悬停）：

function changeTextHyperlinkColours(inputColorNormal, inputColorHover) { 

    var sheets = document.styleSheets;
    var slen = sheets.length; 

    for(var i=0; i<slen; i++) { 

        var rules = document.styleSheets[i].cssRules; 
        var rlen = rules.length; 

        for(var j=0; j<rlen; j++) { 

            if (rules[j].selectorText == 'a') {
                rules[j].style['color'] = inputColorNormal;
            } 

            if (rules[j].selectorText == 'a:hover') {
                rules[j].style['color'] = inputColorHover;}
            }
        } 
    }
}

Answer 2

您还可以在 span 中嵌入链接文本并更改颜色

<a href='www.mydomain.com'><span onclick='this.style.color="red"'>Visit Us</span></a>

Answer 3

纯 JavaScript 版本并没有那么复杂：

var elements = document.getElementsByTagName('a');

for (var i = 0; i < elements.length; i++) {
    if (elements.className.split(/\s+/).indexOf('red') !== -1) {
        elements[i].style.color = 'red';
    }
}

对于现代浏览器：

var elements = document.querySelectorAll('a.red');

[].slice.call(elements).forEach(function(elem) {
    elem.style.color = 'red';
});

Answer 4

您可以使用document.getElementsByTagName("a")。此函数返回页面中<a> 元素的数组。循环这个数组，并在每个元素中使用.style.color = "#000000"。

Answer 5

简单明了（在纯 JS 中也是如此！）

colorLinks("#00FF00");

function colorLinks(hex)
{
    var links = document.getElementsByTagName("a");
    for(var i=0;i<links.length;i++)
    {
        if(links[i].href)
        {
            links[i].style.color = hex;  
        }
    }  
}

如果它是您要查找的类名并且您知道标签，请使用它。

var elements = document.getElementsByTagName("span");
for(var j=0;j<elements.length;j++)
{
    if(elements[j].className === "your class here")
    {
        //do something
    }  
}

您还可以查看getElementsByClassName 和querySelectorAll。两者都支持大多数新浏览器。

Answer 6

更新：我仍然推荐使用 jQuery，但是，如果您想了解如何在没有 jQuery 的情况下使用，我建议您访问这个网站。这显示了当您将鼠标悬停在链接上时如何更改链接颜色，但您可以轻松推断您的具体情况：Javascript Change Link Text Color onmouseover

--

Ottomanlast 有一个很好的观点，那就是查看 jQuery 来帮助您完成这项任务（尽管它可以在不使用库的情况下完成）。然而，为了让你有一个他所说的例子，这里是你如何使用 jQuery 更改链接颜色。

$('.linkClass').click(function(){
      $(this).css('color', 'green');
});

此示例在单击特定链接时更改其颜色。

$('a').css('color', 'green');

此示例会将所有链接更改为绿色。

$('.linkClass').click(function(){
      $(this).removeClass('oldClass');
      $(this).addClass('newClass');
});

这与第一个示例的作用相同，但它删除并添加了您已经在其他地方定义的 CSS 类。 （我会推荐这种方法而不是直接编辑 CSS。）

无论如何，我要说明的一点是，jQuery 使选择和更改 HTML 文档中的对象变得非常容易。你可能想看看它。