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 相关文章推荐
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
canvas知识总结
Jan 25 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 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
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
EJB3.1都有哪些改进
2012/11/17 面试题
员工安全生产责任书
2014/07/22 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
安全员岗位职责范本
2015/04/11 职场文书
公司联欢会主持词
2015/07/04 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
详解python的异常捕获
2022/03/03 Python