CSS改变超链接字体样式

最新推荐文章于 2024-11-16 11:31:15 发布

最新推荐文章于 2024-11-16 11:31:15 发布 · 911 阅读

文章标签：

#CSS #超链接字体 #样式

JavaScript 专栏收录该内容

188 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态改变网页中超链接字体样式的实现方法。通过定义不同状态下超链接的字体样式（如斜体、粗体、下划线和删除线），实现了鼠标悬停时样式的变化效果。

一应用

网站中会有多种超链接，当我们将鼠标移动到某一超链接上时，超链接就会以不同的字体样式显示。

例如超链接的字体样式显示为斜体、粗体、下划线、删除线或粗斜体等。

本应用将通过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>

三运行效果