JavaScript設定字型放大和縮小

admin發表於2017-04-15
JavaScript

分享一段程式碼例項，它實現了動態設定文字字型放大和縮小的功能。

並且可以動態為元素新增class樣式類。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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.softwhy.com</p>
</body>
</html>

程式碼比較簡單，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.document.getElementsByTagName()參閱document.getElementsByTagName()一章節。

（2）.className參閱js className一章節。

相關文章