如何用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

簡單明了（純粹的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更改鏈接文本顏色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文檔中的對象進行更改。 你可能想看看它。