Как изменить цвет ссылок с помощью javascript?

Question

Я хочу знать, как я могу манипулировать всеми ссылками на странице с помощью JavaScript.Я могу получить элементы по идентификаторам с 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>

Пожалуйста, не задавайте вопросы. Я хочу 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';
});

Answer 3

Так я меняю все цвета гиперссылки (обычный / при наведении):

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

Вы можете использовать document.getElementsByTagName("a").Эта функция возвращает массив элементов <a> на странице.Выполните цикл по этому массиву и используйте .style.color = "#000000" в каждом элементе.

Answer 5

Также вы можете встроить текст ссылки в промежуток и изменить цвет

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

Answer 6

Обновление: Я все еще рекомендую использовать jQuery, но, если вы хотите узнать, как это сделать, я бы рекомендовал перейти на этот сайт. Здесь показано, как изменить цвета ссылки при наведении мыши на ссылку, но вы можете легко экстраполировать для вашей конкретной ситуации: Javascript Изменить цвет текста ссылки на mmoverover

-

В 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-документе. Возможно, вы захотите взглянуть на это.