js如何改變文章的字體大小

更新時(shí)間：2016年01月08日 11:25:03 投稿：lijiao

這篇文章主要介紹了js改變文章字體大小的方法，大家在使用word文檔時(shí)工具欄為大家提供更改字體大小的選項(xiàng)，那js是如何改變文章字體大小，下文為大家揭曉，需要的朋友可以參考下

最近發(fā)現(xiàn)有許多朋友提問(wèn)：使用js如何改變一篇文章的字體的大??？

小編查閱了相關(guān)文章，為大家整理了幾個(gè)小案例，供大家參考，具體內(nèi)容如下

效果圖：

點(diǎn)擊大、小按鈕，隨時(shí)切換字體大小

具體代碼：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用js如果改變一篇文章字體的大小</title>
</head>
 <style type="text/css">
   a{ text-decoration:none; color:#0C3}
  a:hover{ color:#F36}
  
 </style>
<body>
<script>
function changesize(size) 
{ 
document.getElementById("article_content").style.fontSize =size+"px"; 
} 
</script>
<div id="article_content">腳本之家<br/>腳本之家歡迎您<p>好好學(xué)習(xí) 天天向上</div>
<a href="javascript:changesize('20')">大</a>&nbsp;<a href="javascript:changesize('12')">小</a>
</body>
</html>

再為大家分享一栗子：

這個(gè)工作原理很簡(jiǎn)單，就是在觸發(fā)事件的時(shí)候?qū)⑽恼碌淖痔?hào)改變，更直白一些就是改變font-size這個(gè)屬性的值（jQuery版本1.7.2）
HTML

<div class="box">
  <div class="ctrl">
    <a href="javascript:;">放大</a>
    <a href="javascript:;">縮小</a>
    <a href="javascript:;">默認(rèn)</a>
  </div>
  <div class="cont">這里是一些文字</div>
</div>

CSS

.box{text-align:center;}
.ctrl{padding:50px 0px 0px 0px;background:#f4f4f4;font-size:0px;border-bottom:3px solid #333;}
.ctrl a{display:inline-block;width:50px;height:30px;line-height:30px;background:#333;color:#fff;font-size:14px;}
.ctrl a:hover{background:#444;color:#fff;font-weight:700;text-decoration:none;}
.cont{padding-top:50px;font-size:14px;}

$(function(){
  function sizeIn(){
    var sizeCont = parseInt($(".cont").css("fontSize")); // 獲取原設(shè)定的font-size的值
    if(sizeCont == 30){ // 判斷font-size增大到30像素時(shí)停止
      $(".cont").css({fontSize:sizeCont});
    }else{
      $(".cont").css({fontSize:sizeCont + 1});
    }
  }
  function sizeOut(){
    var sizeCont = parseInt($(".cont").css("fontSize"));
    if(sizeCont == 10){ // 判斷font-size減小到10像素時(shí)停止
      $(".cont").css({fontSize:sizeCont});
    }else{
      $(".cont").css({fontSize:sizeCont - 1});
    }
  }
  function sizeDefault(){
    $(".cont").css({fontSize:""})
  }
  $(".ctrl a").click(function(){
    if($(this).index() == 0){
      sizeIn();
    }else if($(this).index() == 1){
      sizeOut();
    }else{
      sizeDefault();
    }

  })
});

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: