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中的typeof和instanceof介绍
Dec 04 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
ES6 Generator基本使用方法示例
Jun 06 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 set_time_limit()函数的使用详解
2013/06/05 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
php商品对比功能代码分享
2015/09/24 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
Python中的列表知识点汇总
2015/04/14 Python
python引用DLL文件的方法
2015/05/11 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
python判断元素是否存在的实例方法
2020/09/24 Python
python中pop()函数的语法与实例
2020/12/01 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
网络舆情信息简报
2015/07/21 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
Python 语言实现六大查找算法
2021/06/30 Python