<!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=utf-8" />
<title>新闻页的大小中字体实现</title>
<style type="text/css">
a:link,a:visited{
color:#0044ff;
text-decoration:none;
}
a:hover{
color:#9CF;
}
#newsText{
width:500px;
border:#0FF 1px solid;
}
/*预定义一些样式封装到选择器，一般使用类选择器*/
.norm{
color:#000;
font-size:16px;
background-color:#cdd8d0;
}
.max{
color:#808080;
font-size:28px;
background-color:#9ce9b4;
}
.min{
color:#ffff00;
font-size:12px;
background-color:#f1b96b;
}
</style>
</head>
<body>
<script type="text/javascript">
function changeFont(size,clr){
/*既然要对div newsText中的文本进行操作
必须要获取div节点对象
*/
var oNewsText = document.getElementById("newsText");
//获取oNewsText节点的style样式属性
oNewsText.style.fontSize = size;
oNewsText.style.color=clr;
}
//如果根据用户点击需要的效果不唯一
//仅通过传递多个参数虽然可以实现效果，但是：
//1：传参数过多，阅读性差
//2:js和css代码耦合性高
/*
解决方案：
1：将多个所需的样式进行封装
2：封装到选择器中，只要给指定的标签加载不同的选择器就可以了
*/
function changeFont(selectorName){
var oNewsText = document.getElementById("newsText");
oNewsText.className = selectorName;
}
</script>
<!--
需求：新闻字体的大中小样式改变
思路：
1：现有新闻数据，然后标签封装
2：定义一些样式页面
3：确定事件源事件和事件，以及处理的=方式中的节点
事件源：a标签，事件，
被处理的节点 div-newsText
既然要加入超链接自定义的事件处理，就要先取消超链接的默认点击效果
可以使用herf设置：javascript：void(0)来完成
-->
<h2>这是一个新闻标题</h2>
<hr />
<a href="javascript:void(0)" onclick ="changeFont('max')">大字体</a>
<a href="javascript:void(0)" onclick ="changeFont('norn')">中字体</a>
<a href="javascript:void(0)" onclick ="changeFont('min')">小字体</a>
<div id="newsText" class="norm" >
这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢
这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢
这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢
这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢
这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢
这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢
这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢
这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢这是一个新闻内容呢
这是一个新闻内容呢
</div>
</body>
</html>
