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