怎么在HTML中设置点击超链接后变成灰色
发布时间:-03-04 17:48:28
来源:亿速云
阅读:70
作者:Leah
这篇文章给大家介绍怎么在HTML中设置点击超链接后变成灰色,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
html有什么特点
1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。
2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。
4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
操作环境:windows7系统、html5版,DELL G3电脑。
HTML设置点击超链接变成灰色的方法:
一、寻找HTML超链接
要想让超链接失效变灰色,首先要做的事情是找到超链接。寻找超链接的方法有很多,如果采用W3C的方法,就是如下写法:document.getElementsByTagName("a")
如果觉得W3C的方法太长了或者不美观,可以使用一些JavaScript库,例如jQuery或者Mootools。这样获取超链接就非常简洁。
您也可以使用在标签上加上ID的方式,但是有个小缺点。如果您是针对全篇的超链接,这种加ID的方式就增大了工作量。
二、改变HTML超链接
找到超链接之后,接下来要做的事情就是改变超链接,使其失效并且变成灰色。让超链接失效的方式有好几种,最常见的就是把href属性设为“#”。实际上这种方式根本就没有改变超链接,只是使得href属性没有指向一个合理的链接而已。
真正改变超链接的方式是让其变为普通文本,而且文本的字体颜色是灰色的。如同以下效果:
好了,闲话就不扯了,让我们进入正题。下面的代码是HTML文档一加载完毕就立刻执行函数。varaddLoadEvent=function(func){
varoldonload=window.onload;
if(typeofwindow.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
if(oldonload){
oldonload();
}
func();
}
}
};
这个函数是为了后面加载查找超链接的函数。下面是获取HTML文档中超链接,并且使其失效变灰色。vargetLinks=function(){
if(!document.getElementsByTagName)returnfalse;
if(!document.createElement)returnfalse;
if(!document.getElementsByName("a"))returnfalse;
varlinks=document.getElementsByTagName("a");
for(vari=0;i
//判断href属性是否包含“#”符号
if((links[i].getAttribute("href").indexOf("#"))>=0){
varpara=document.createElement("p");
varfon=document.createElement("font");
fon.setAttribute("color","#808080");
fon.innerHTML=links[i].lastChild.nodeValue;
varcontent=para.appendChild(fon);
replaceEach(links[i],content);
}else{
links[i].style.color="990033";
}
}
};
通过阅读以上代码,相信读者已经明白了。改变超链接的方式实际上是用
替换了标签。并且在
标签中内嵌了标签,的颜色设为了灰色,就达到了我们想要的效果。
其中用到了替换函数replaceEach,下面给出replaceEach函数的代码。//替换HTML元素
varreplaceEach=function(targetNode,newNode){
vartargetParentNode=targetNode.parentNode;
varnewParentNode=newNode.parentNode;
//若targetParentNode和newParentNode都存在父节点
if(targetParentNode&&newParentNode){
targetParentNode.replaceChild(newNode.cloneNode(true),targetNode);
}else{
newParentNode.replaceChild(targetNode,newNode);
}
};
最后别忘记了最重要的一步,在addLoadEvent函数中加载查找函数,如下:addLoadEvent(getLinks);
关于怎么在HTML中设置点击超链接后变成灰色就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。