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 相关文章推荐
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
JS常用排序方法实例代码解析
Mar 03 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 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实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python中列表元素连接方法join用法实例
2015/04/07 Python
python分析网页上所有超链接的方法
2015/05/08 Python
Python书单 不将就
2017/07/11 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
struct与class的区别
2014/02/03 面试题
应用化学专业职业生涯规划书
2014/01/22 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
Python 语言实现六大查找算法
2021/06/30 Python
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL
redis lua限流算法实现示例
2022/07/15 Redis