使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);