javascript 控制超级链接样式的实现代码

发布时间:2020-03-01编辑:脚本学堂
有没有想过用javascript可以灵活控制内容中超级链接的样式呢?没有做不到,只有想不到,来看今天为大家准备的这段代码吧,用js控制css样式。

1、html内容,就一句:

<a href="#">脚本学堂,欢迎大家的光临。</a>

2、控制链接样式的js代码。

<script language=javascript>
/**
 * 控制超级链接样式
 * by http://www.jb200.com
*/
linkColor="#ff0000";  
linkFontSize="18px";  
linkFontWeight="normal";  
linkTextDecoration="none";  
vlinkColor="#ff0000";  
vlinkFontSize="18px";  
vlinkFontWeight="normal";  
vlinkTextDecoration="none";  
alinkColor="#3c5a9a";  
alinkFontSize="20px";  
alinkFontWeight="bold";  
alinkTextDecoration="underline";  
var linkStyle=document.createStyleSheet();  
linkStyle.cssText="A:link{COLOR: "+linkColor + "; FONT-SIZE:" + linkFontSize + ";FONT-WEIGHT:" + linkFontWeight + ";TEXT-DECORATION:" + linkTextDecoration+";}"  
+ "A:visited{COLOR: "+vlinkColor + "; FONT-SIZE:" + vlinkFontSize + ";FONT-WEIGHT:" + vlinkFontWeight + ";TEXT-DECORATION:" + vlinkTextDecoration+";}"  
+ "A:hover{COLOR: "+alinkColor + "; FONT-SIZE:" + alinkFontSize + ";FONT-WEIGHT:" + alinkFontWeight + ";TEXT-DECORATION:" + alinkTextDecoration+";}"  
</script>