您的位置：首页 > Web前端 > CSS

CSS改变超链接字体样式

2017-04-12 10:45 351 查看
 

一 应用
网站中会有多种超链接，当我们将鼠标移动到某一超链接上时，超链接就会以不同的字体样式显示。
例如超链接的字体样式显示为斜体、粗体、下划线、删除线或粗斜体等。
本应用将通过JavaScript代码改变超链接字体样式。
应用了字体样式中的fontWeight、fontStyle以及textDecoration属性，通过设置其属性值，改变超链接的字体样式。
 
二 代码

<script language="javascript">
//当鼠标移动到超链接时改变指定链接的字体样式
function onmovein(v)
{
if (v=="a")
{
a.style.fontWeight = "Bold";//粗体
}
if (v=="b")
{
b.style.fontStyle = "Italic";//斜体
}
if (v=="c")
{
c.style.textDecoration = "underline";//下划线
}
if (v=="d")
{
d.style.textDecoration = "line-through";//删除线
}
if (v=="e")
{
e.style.fontWeight = "Bold";//粗体
e.style.fontStyle = "Italic";//斜体
}
}
//当鼠标移出超链接时，恢复超链接的字体样式
function onmoveout()
{
a.style.fontWeight = "normal";
b.style.fontStyle = "normal";
c.style.textDecoration = "none";
d.style.textDecoration = "none";
e.style.fontStyle = "normal";
e.style.fontWeight = "normal";
}
</script>
<body vlink="#FF3300" bgcolor="#CCFFFF">
<a href="#" name="a" onMouseMove="onmovein('a');" onMouseOut="onmoveout();">粗体文字</a> ┊
<a href="#" name="b" onMouseMove="onmovein('b');" onMouseOut="onmoveout();">斜体文字</a> ┊
<a href="#" name="c" onMouseMove="onmovein('c');" onMouseOut="onmoveout();">下划线文字</a> ┊
<a href="#" name="d" onMouseMove="onmovein('d');" onMouseOut="onmoveout();"onClick="window.location.reload(); ">删除线文字</a> ┊
<a href="#" name="e" onMouseMove="onmovein('e');" onMouseOut="onmoveout();">粗体和斜体</a>
</body>

 
三 运行效果



 





大小: 2.6 KB

查看图片附件
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航