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

Question

我想知道如何使用javascript操作页面上的所有链接.我可以通过id获取元素document.getElementById(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

简单明了(纯粹的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 2

纯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';
});