How to change the color of the links with javascript?

Question

I want to know how can I manipulate all the links on a page with javascript. I can get elements by id's with document.getElementById(id) , but how can I get the links? And also how can I get all elements with a certain classname ? I want to change the color of the link and class elements.

I mean these links:

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

And an example for an element with a class:

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

Please no jquery. I want javascript.

Answer 1

Simple and straightforward (in pure JS too!)

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

If it's a class name you're looking for and you know the tag, just use this.

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

You can also look at getElementsByClassName and querySelectorAll . Both have support in most new browsers.

Answer 2

The pure-JavaScript version isn't all that complicated:

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

And for modern browsers:

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

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

Answer 3

This is how I change all hyperlink colors (normal/hover):

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 4

You can use document.getElementsByTagName("a") . This function returns an array of the <a> elements in the page. Loop over this array, and use .style.color = "#000000" in each element.

Answer 5

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

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

Answer 6

Update: I still recommend using jQuery, but, if you want to learn how to do it without, I would recommend heading over to this site. This shows how to change link colors when you mouse over the link, but you can easily extrapolate for your specific situation: Javascript Change Link Text Color onmouseover

--

Ottomanlast has a good point about checking out jQuery to help you out with this task (although it can be done without the use of a library). However, just so you have an example of what he is talking about, here is how you could change link colors using jQuery.

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

This example changes the color of a specific link when it is clicked.

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

This example will change all the links to a green color.

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

This does the same thing as the first example, but this removes and adds CSS classes that you already have defined elsewhere. (I would recommend this method over just editing the CSS directly.)

Anyway, the point I'm trying to make is that jQuery makes it extremely easy to select and then make changes to the objects within your HTML document. You may want to take a look into it.