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