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

2019-11-20 10:50:11

字体：大中小

来源：转载

供稿：网友

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

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

效果图：

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

具体代码：

<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>好好学习 天天向上</div><a href="javascript:changesize('20')">大</a> <a href="javascript:changesize('12')">小</a></body></html>

再为大家分享一栗子：

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

<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

.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")); // 获取原设定的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程序设计有所帮助。

上一篇：javascript匀速运动实现方法分析

下一篇：JavaScript缓冲运动实现方法(2则示例)