點選按鈕實現文字放大和縮小功能

admin發表於2017-04-16

分享一段程式碼例項，它實現了點選按鈕放大和縮小文字的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function(){
  var oP = document.getElementById('p1');
  var oBnt1 = document.getElementById('btn1');
  var oBnt2 = document.getElementById('btn2');
  var num = 15
  oBnt1.onclick = function(){
    num++
    oP.style.fontSize = num + 'px';
  }
  oBnt2.onclick = function(){
    num--
    oP.style.fontSize = num + 'px';
  }
};
</script>
</head>
<body>
  <p id="p1">本站的url地址是www.softwhy.com</p>
  <input id="btn1" type="button" value="+" />
  <input id="btn2" type="button" value="-" />
</body>
</html>

相關文章