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设置字体放大和缩小属于前端实例代码,有关更多实例代码大家可以查看

JavaScript设置字体放大和缩小

回复

我来回复
  • 暂无回复内容