<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>