DOM练习文本字体

最新推荐文章于 2022-09-13 10:04:59 发布

公子薛

最新推荐文章于 2022-09-13 10:04:59 发布

阅读量576

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/xgcfxl2011/article/details/8229244

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style type="text/css">

a:link,a:visited{
	color:#FFFF00;
	text-decoration:none;
	font-size:14px;
	}
	
a:hover{
	color:#00FF00;
	}
	
.newsstyle{
	border:#0000FF 1px solid;
	width:300px;
	font-size:16px;
	color:#FF0000;
	background-color:#000000;
	
	}
	
.max{
	border:#0000FF 1px solid;
	width:300px;
	font-size:18px;
	color:#00FF00;
	background-color:#9900FF;
	}
.min{
	border:#0000FF 1px solid;
	width:300px;
	font-size:14px;
	color:#0000CC;
	background-color:#CCFF66;
	}
</style>

<script type="text/javascript">
function changeFont_1(size)
{
	var divNode = document.getElementById("newstext");
	divNode.style.fontSize = size;
}

function changeFont(styleName)
{
	var divNode = document.getElementById("newstext");
	divNode.className = styleName;
}
</script>
</head>

<body>


<h2>这是一条名言警句</h2>
<a href="javascript:void(0)" οnclick="changeFont('max')">大字体</a> 
<a href="javascript:void(0)" οnclick="changeFont('newsstyle')">中字体</a> 
<a href="javascript:void(0)" οnclick="changeFont('min')">小字体</a>
<div id="newstext" class="newsstyle">
宝剑锋从磨砺出，梅花香自苦寒来<br/>
宝剑锋从磨砺出，梅花香自苦寒来<br/>
宝剑锋从磨砺出，梅花香自苦寒来<br/>
宝剑锋从磨砺出，梅花香自苦寒来<br/>
宝剑锋从磨砺出，梅花香自苦寒来<br/>
宝剑锋从磨砺出，梅花香自苦寒来<br/>
</div>


</body>
</html>

运行结果：

公子薛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM练习文本字体

无标题文档a:link,a:visited{ color:#FFFF00; text-decoration:none; font-size:14px; } a:hover{ color:#00FF00; } .newsstyle{ border:#0000FF 1px solid; width:300px; font-size:16px; color:#FF00
复制链接

扫一扫