一、初级方式
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #newsText { width:500px; border:#C03 1px solid; padding:10px; } /*点击字体，可以改变新闻字体的大小，但是不想改变点击前和点击后的颜色变化.z组合选择器*/ a:link,a:visited { color:#03C; text-decoration:none; } /*当鼠标悬浮在超链接上时，希望能够颜色不同，以适区分*/ a:hover{ color:#0F0; } </style> </head> <body> <!--新闻字体的大小样式改变 思路：1,先写新闻内容，并用标签封装 2,定义一些页面样式，静态方式在标签上定义和预定义样式，方便用于事件处理时的样式加载 3,确定时间源和事件、处理方式和被处理的节点 事件源：a标签，事件：onclick，被处理的节点：div_newstext 既然要给超链接计入自定义的时间处理，就要先取消超链接的默认点击效果：可以使给href设置：javascript:void(0)来完成 4,用js处理事件 --> <script type="text/javascript"> //这三个事件处理方式，其实只是传入的参数不同 function changeFont(size) { //通过id获取处理节点 var node=document.getElementById("newsText"); node.style.fontSize=size; } </script> <h1>这是一个新闻标题</h1> <!----> <a href="javascript:void(0)" onclick="changeFont('28px')">大字体</a> <a href="javascript:void(0)" onclick="changeFont('16px')">中字体</a> <a href="javascript:void(0)" onclick="changeFont('12px')">小字体</a> <hr/> <div id="newsText"> 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 </div> </body> </html>二、高级方式 高级方式出现的原因：有时需要一个按钮，就可以改变新闻的背景颜色、字体等等问题，称为新闻显示格式，若通过初级的不断传参，缺点：①传参过多，阅读性差②js代码和css代码耦合性高③不利于扩展 解决方式：将多个所需的样式，进行封装，一般封装到类选择器中，只要给指定的标签加载的不同而选择 样式作为实参传递给函数
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #newsText { width:500px; border:#C03 1px solid; padding:10px; } /*点击字体，可以改变新闻字体的大小，但是不想改变点击前和点击后的颜色变化.z组合选择器*/ a:link,a:visited { color:#03C; text-decoration:none; } /*当鼠标悬浮在超链接上时，希望能够颜色不同，以适区分*/ a:hover{ color:#0F0; } .norm{ color:#000; font-size:16px; background-color:#FFF; padding:10px } .max { color:#F00; font-size:16px; background-color:#333; } .min { color:#6F9; font-size:12px; background-color:#FF0; } </style> </head> <body> <!--新闻字体的大小样式改变 思路：1,先写新闻内容，并用标签封装 2,定义一些页面样式，静态方式在标签上定义和预定义样式，方便用于事件处理时的样式加载 3,确定时间源和事件、处理方式和被处理的节点 事件源：a标签，事件：onclick，被处理的节点：div_newstext 既然要给超链接计入自定义的时间处理，就要先取消超链接的默认点击效果：可以使给href设置：javascript:void(0)来完成 4,用js处理事件 --> <script type="text/javascript"> //这三个事件处理方式，其实只是传入的参数不同 function changeFont(selectorName) { //通过id获取处理节点 var node=document.getElementById("newsText"); node.className=selectorName; } </script> <h1>这是一个新闻标题</h1> <!----> <a href="javascript:void(0)" onclick="changeFont('max')">大字体</a> <a href="javascript:void(0)" onclick="changeFont('norm')">中字体</a> <a href="javascript:void(0)" onclick="changeFont('min')">小字体</a> <hr/> <div id="newsText"> 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容 </div> </body> </html>在实际开发中常把样式写在一个css文档中，方便调用，这样网页的代码不用变，尤其是js代码不用变，可以大大增强代码的复用性和扩展性
