<style> .red{background-color: red;border: 1px solid #000000;color: #f1f1f1;} .yellow{background-color: yellow;border: 1px solid #000000;color: #f00;} </style> <script> window.onload=function(){ var btnSub=document.getElementById("btnSub"); var btnAdd=document.getElementById("btnAdd"); var btnRed=document.getElementById("btnRed"); var btnYellow=document.getElementById("btnYellow"); var pText=document.getElementById("pText"); var size=15;//默认字体是15px btnSub.onclick=function(){ if(size>=5){//设置最小字体为5px size-=2;//每次减2px pText.style.fontSize=size+'px'; } } btnAdd.onclick=function(){ if(size<=30){//设置最大字体是30px size+=2;//每次点击按钮字体增加2 pText.style.fontSize=size+'px';//+'px'为了浏览器兼容 } } btnRed.onclick= function () { pText.className="red"; //为什么不写成 pText.class="red"??? 答案:class是保留字,不能用 } btnYellow.onclick=function(){ pText.className="yellow"; } } </script> </head> <body> <p id="pText">苍老师:我想..苍老师:还想 苍老师:真的想</p> <input id="btnSub" type="button" value="字体变小"/> <input id="btnAdd" type="button" value="字体变大"/> <input id="btnRed" type="button" value="改变颜色-红色"/> <input id="btnYellow" type="button" value="改变颜色-黄色"/> </body> </html>