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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
Javascript实现单例模式
Jan 24 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
Redux实现组合计数器的示例代码
Jul 04 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 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过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
JS高级笔记
2011/07/13 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Python和Sublime整合过程图示
2019/12/25 Python
Python实现对adb命令封装
2020/03/06 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
职工运动会邀请函
2014/02/02 职场文书
六一节目主持词
2014/04/01 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
开展警示教育活动总结
2015/05/09 职场文书
党支部意见范文
2015/06/02 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
Docker官方工具docker-registry案例演示
2022/04/13 Servers
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android