HTML设置点击超链接变成灰色的方法：首先加载查找超链接的函数；然后用【】替换了【】标签；最后在标签中内嵌了【】标签，【】的颜色设为了灰色。
本教程操作环境：windows7系统、html5版，dell g3电脑。
HTML设置点击超链接变成灰色的方法：
一、寻找HTML超链接
要想让超链接失效变灰色，首先要做的事情是找到超链接。寻找超链接的方法有很多，如果采用W3C的方法，就是如下写法：
document.getElementsByTagName("a")
如果觉得W3C的方法太长了或者不美观，可以使用一些JavaScript库，例如jQuery或者Mootools。这样获取超链接就非常简洁。
立即学习“前端免费学习笔记（深入）”；
您也可以使用在标签上加上ID的方式，但是有个小缺点。如果您是针对全篇的超链接，这种加ID的方式就增大了工作量。
二、改变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 = 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"; } }};
通过阅读以上代码，相信读者已经明白了。改变超链接的方式实际上是用
替换了标签。并且在
标签中内嵌了标签，的颜色设为了灰色，就达到了我们想要的效果。
其中用到了替换函数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);
相关学习推荐：html视频教程
以上就是HTML如何设置点击超链接变成灰色的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1549160.html
微信扫一扫 
支付宝扫一扫 
