使HTML超連接失效變灰色的JavaScript

           在Web開發中，常常會遇到這樣的需求。根據用戶的不一樣操做來決定超級連接是否可用。不少人一遇到這種問題，就靠百度幫忙。而實際上，網上的代碼大可能是殘章片斷，若是本身不熟悉其中的原理。光靠粘貼拷貝是沒有任何幫助的。下面的代碼是我在項目中用到的，在此貼出來和你們分享。

1、尋找HTML超連接

      要想讓超連接失效變灰色，首先要作的事情是找到超連接。尋找超連接的方法有不少，若是採用W3C的方法，就是以下寫法：

document.getElementsByTagName("a")

      若是以爲W3C的方法太長了或者不美觀，可使用一些JavaScript庫，例如jQuery或者Mootools。這樣獲取超連接就很是簡潔。

      您也可使用在<a></a>標籤上加上ID的方式，可是有個小缺點。若是您是針對全篇的超連接，這種加ID的方式就增大了工做量。

2、改變HTML超連接

    找到超連接以後，接下來要作的事情就是改變超連接，使其失效而且變成灰色。讓超連接失效的方式有好幾種，最多見的就是把href屬性設爲「#」。實際上這種方式根本就沒有改變超連接，只是使得href屬性沒有指向一個合理的連接而已。

    真正改變超連接的方式是讓其變爲普通文本，並且文本的字體顏色是灰色的。如同如下效果：

     好了，閒話就不扯了，讓咱們進入正題。下面的代碼是HTML文檔一加載完畢就馬上執行函數。

var addLoadEvent=function(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
};

        這個函數是爲了後面加載查找超連接的函數。下面是獲取HTML文檔中超連接，而且使其失效變灰色。

var getLinks=function() {
if(!document.getElementsByTagName)return false;
if(!document.createElement)return false;
if(!document.getElementsByName("a"))return false;
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        //判斷href屬性是否包含「#」符號
        if ((links[i].getAttribute("href").indexOf("#")) >= 0) {
            var para = document.createElement("p");
            var fon = document.createElement("font");
            fon.setAttribute("color", "#808080");
            fon.innerHTML =links[i].lastChild.nodeValue;
            var content = para.appendChild(fon);
            replaceEach(links[i], content);
        } else {
            links[i].style.color = "990033";
        }
    }
};

        經過閱讀以上代碼，相信讀者已經明白了。改變超連接的方式其實是用<p>替換了<a>標籤。而且在<p>標籤中內嵌了<font>標籤，<font>的顏色設爲了灰色，就達到了咱們想要的效果。

      其中用到了替換函數replaceEach，下面給出replaceEach函數的代碼。

//替換HTML元素
var replaceEach=function(targetNode, newNode) {
    var targetParentNode = targetNode.parentNode;
    var newParentNode = newNode.parentNode;
    //若 targetParentNode 和 newParentNode 都存在父節點
    if (targetParentNode && newParentNode) {
        targetParentNode.replaceChild(newNode.cloneNode(true), targetNode);
    } else {
        newParentNode.replaceChild(targetNode, newNode);
    }
};

        最後別忘記了最重要的一步，在addLoadEvent函數中加載查找函數，以下：

addLoadEvent(getLinks);