<!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>
运行结果: