點選大中小按鈕設定文章字型大小

螞蟻小編發表於2018-07-02

很多網頁都有這樣的功能，在頁面的某一個位置會有三個按鈕，點選以後可以設定字型的大小，算是一個比較人性化的舉措，因為可以滿足不同人群的需要和喜好，下面就通過簡單的程式碼例項介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function SetFont(size){
  var divBody=document.getElementById("news_content");
  if(!divBody){return;}
　divBody.style.fontSize=size+"px";
   var divChildBody=divBody.childNodes;
　for(var i=0;i<divChildBody.length;i++){
　  if(divChildBody[i].nodeType==1){
      divChildBody[i].style.fontSize = size + "px";
　  }
  }
}
</script>
</head>
<body>
字號：
<a href="javascript:SetFont(16)">大</a> 
<a href="javascript:SetFont(14)">中</a> 
<a href="javascript:SetFont(12)">小</a>
<div style="font-size:14px;" id="news_content">文章內容</div>
</body>
</html>

相關文章