js如何改变文章的字体大小

内容摘要
最近发现有许多朋友提问：使用js如何改变一篇文章的字体的大小？
小编查阅了相关文章，为大家整理了几个小案例，供大家参考，具体内容如下
效果图：

点击大、小按钮，随时切换字体大小
文章正文

最近发现有许多朋友提问：使用js如何改变一篇文章的字体的大小？

小编查阅了相关文章，为大家整理了几个小案例，供大家参考，具体内容如下

效果图：

点击大、小按钮，随时切换字体大小

具体代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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">phpstudy<br/>phpstudy欢迎您<p>好好学习 天天向上</div>
<a href="javascript:changesize('20')">大</a> <a href="javascript:changesize('12')">小</a>
</body>
</html>

再为大家分享一栗子：

这个工作原理很简单，就是在触发事件的时候将文章的字号改变，更直白一些就是改变font-size这个属性的值（jQuery版本1.7.2）
HTML

1
2
3
4
5
6
7
8
<div class="box">
  <div class="ctrl">
    <a href="javascript:;">放大</a>
    <a href="javascript:;">缩小</a>
    <a href="javascript:;">默认</a>
  </div>
  <div class="cont">这里是一些文字</div>
</div>

CSS

1
2
3
4
5
.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;}

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(function(){
  function sizeIn(){
    var sizeCont = parseInt($(".cont").css("fontSize")); // 获取原设定的font-size的值
    if(sizeCont == 30){ // 判断font-size增大到30像素时停止
      $(".cont").css({fontSize:sizeCont});
    }else{
      $(".cont").css({fontSize:sizeCont + 1});
    }
  }
  function sizeOut(){
    var sizeCont = parseInt($(".cont").css("fontSize"));
    if(sizeCont == 10){ // 判断font-size减小到10像素时停止
      $(".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();
    }
 
  })
});

希望本文所述对大家学习javascript程序设计有所帮助。
代码注释
上一篇C 语言中实现环形缓冲区下一篇php上传中文文件名乱码问题处理方案

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！