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.

(jQuery is JavaScript -- in any case, the same applies -- set the style/class/or-other-selector of the element and use CSS. In fact, there is no JavaScript required with CSS... there is no trivial way to get all elements with a given class, but you can get all elements with a given "tag name" (hint) -- it's a standard DOM method -- and then iterate those with the appropriate conditional. If you don't want to use jQuery, I would look at the W3C DOM specification for the "standard" DOM functions and then quirksmode to find out all the different ways they really work.) — user166390
– user166390, Commented Feb 27, 2011 at 4:12
See the update to my answer. I provided a link that demonstrates what you are trying to do. — JasCav
– JasCav, Commented Feb 27, 2011 at 4:17

score 19 · Accepted Answer · 2011-02-27 04:55:36Z

19

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.

edited Feb 27, 2011 at 4:55

answered Feb 27, 2011 at 4:14

user1385191

Sign up to request clarification or add additional context in comments.

10 Comments

user1385191 Over a year ago

I've added a quick example for you regarding classes.

Maxxon Over a year ago

I just want to get the elements with a class name, like: <div class="im_looking_for_all_elements_with_this_class_name">hello</div> Is that possible?

user1385191 Over a year ago

In that case, you'd substitute "span" for "div" in my snippet and then place the class you're looking for in place of "im_looking_for_all_elements_with_this_class_name".

Blender Over a year ago

if (links[i].href)... is unneeded. It's against standards to use href= attributes for elements other than <a>.

Maxxon Over a year ago

Oh I did it this way: var elements = document.getElementsByClassName("link"); for(var j=0;j<elements.length;j++) { elements[j].style.color = "#" + color; }

|

Blender · Accepted Answer · 2014-01-13 05:48:50Z

8

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

edited Jan 13, 2014 at 5:48

answered Feb 27, 2011 at 4:11

Blender

300k55 gold badges462 silver badges512 bronze badges

4 Comments

Maxxon Over a year ago

Exactly this, changing colors. But can you write the pure javascript version? How can i get a's with js?

SadullahCeran Over a year ago

An error on the loop, should be:for (var i = 0; i < document.getElementsByTagName('a').length; i++)

user1385191 Over a year ago

By the way, that doesn't find all of the links. A link is an element with a "href" attribute.

Blender Over a year ago

I fixed the loop thing, and added a class selector. @Matt, is it valid (X)HTML to add href attributes to elements besides <a>?

JasCav · Accepted Answer · 2011-02-27 04:15:11Z

1

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.

answered Feb 27, 2011 at 4:15

JasCav

34.6k21 gold badges117 silver badges175 bronze badges

2 Comments

Maxxon Over a year ago

I know about jQuery, but I'd like to know how the pure js works, it's not so much more complicated than jquery so why not learn pure js instead? Thanks anyway, the guys who will read this question in the future might find this answer helpful.

JasCav Over a year ago

@Maxxon - No problem. Sorry it didn't answer your exact question. However, one thing - doing "pure JavaScript" (which, jQuery is JavaScript) can be significantly more difficult than just using jQuery. Not from a language standpoint, but from a development time, compatibility, etc standpoint. It's the reason why many developers don't even consider doing JavaScript w/out jQuery (or a similar library). Check out this awesome post by Addy Osman (and others) about jQuery vs. Vanilla JS - addyosmani.com/blog/javascriptuncovered

agranjo · Accepted Answer · 2011-02-27 09:49:31Z

1

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.

edited Feb 27, 2011 at 9:49

answered Feb 27, 2011 at 4:18

agranjo

1,37410 silver badges14 bronze badges

Comments

Supertecnoboff · Accepted Answer · 2017-06-23 12:17:25Z

1

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

answered Jun 23, 2017 at 12:17

Supertecnoboff

6,62712 gold badges61 silver badges103 bronze badges

Comments

Ishan Liyanage · Accepted Answer · 2016-10-12 10:40:51Z

0

Also you can embed the link text in the span and change the color

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

answered Oct 12, 2016 at 10:40

Ishan Liyanage

2,4071 gold badge29 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to change the color of the links with javascript?

6 Answers 6

10 Comments

4 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

10 Comments

4 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related