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


Posted in Javascript onJanuary 08, 2016

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

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

效果图:

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;}

JS

$(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 相关文章推荐
js Array对象的扩展函数代码
Apr 24 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
BootStrap中
Dec 10 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
ztree实现权限横向显示功能
May 20 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
javascript实现简易计算器功能
Sep 23 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 #Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 #Javascript
基于javascript实现右下角浮动广告效果
Jan 08 #Javascript
jQuery数据类型小结(14个)
Jan 08 #Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 #Javascript
基于jquery实现图片上传本地预览功能
Jan 08 #Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 #Javascript
You might like
memcache命令启动参数中文解释
2014/01/13 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
Python基础之函数用法实例详解
2014/09/10 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
利用python实现数据分析
2017/01/11 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
linux面试相关问题
2013/04/28 面试题
前台文员的岗位职责
2013/11/14 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
golang在GRPC中设置client的超时时间
2021/04/27 Golang
MySQL transaction事务安全示例讲解
2022/06/21 MySQL