JavaScript设置字体放大和缩小
分类：实例代码
分享一段代码实例，它实现了动态设置文本字体放大和缩小的功能。
并且可以动态为元素添加class样式类。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#p{
line-height:30px;
font-family:"微软雅黑";
}
.red{
width:300px;
height:300px;
background:#f00;
color:#FFFF00;
padding:10px;
border:10px solid #ccc;
overflow: hidden;
}
.yellow{
width:300px;
height:300px;
background:#ff0;
color:#F00;
padding:10px;
border:10px solid #ccc;
}
</style>
<script>
window.onload=function(){
var oBtn1=document.getElementsByTagName('input')[0];
var oBtn2=document.getElementsByTagName('input')[1];
var oBtn3=document.getElementsByTagName('input')[2];
var oBtn4=document.getElementsByTagName('input')[3];
var oP=document.getElementsByTagName('p')[0];
var num=15;
oBtn1.onclick=function(){
num--;
if(num<12){
num=12;
}
oP.style.fontSize=num+'px';
}
oBtn2.onclick=function(){
num++;
if(num>22){
num=22;
}
oP.style.fontSize=num+'px';
}
oBtn3.onclick=function(){
oP.className='red';
}
oBtn4.onclick=function(){
oP.className='yellow';
}
}
</script>
</head>
<body>
<input type="button" value="-" id="btn1"/>
<input type="button" value="+" id="btn2" />
<input type="button" value="红色" />
<input type="button" value="黄色" />
<p id="p">前端教程网欢迎您，本站url地址是www.pipipi.net</p>
</body>
</html>
代码比较简单，更多内容可以参阅相关阅读。
相关阅读:
（1）.document.getElementsByTagName()参阅document.getElementsByTagName()一章节。
（2）.className参阅js className一章节。
JavaScript设置字体放大和缩小，这样的场景在实际项目中还是用的比较多的，关于JavaScript设置字体放大和缩小就介绍到这了。
JavaScript设置字体放大和缩小属于前端实例代码，有关更多实例代码大家可以查看。