jQuery动态修改字体大小的方法【测试可用】


Posted in Javascript onSeptember 09, 2016

本文实例讲述了jQuery动态修改字体大小的方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery动态修改字体大小的方法【测试可用】

完整代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
* { margin:0; padding:0; }
.msg {width:300px; margin:100px; }
.msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}
.msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;font-size:12px;color:white; }
.msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("span").click(function(){
    var thisEle = $("#para").css("font-size");
    var textFontSize = parseFloat(thisEle , 10);
    var unit = thisEle.slice(-2); //获取单位
    var cName = $(this).attr("class");
    if(cName == "bigger"){
        if( textFontSize <= 22 ){
          textFontSize += 2;
        }
    }else if(cName == "smaller"){
        if( textFontSize >= 12 ){
          textFontSize -= 2;
        }
    }
    $("#para").css("font-size", textFontSize + unit);
  });
});
</script>
</head>
<body>
<div class="msg">
  <div class="msg_caption">
    <span class="bigger" >放大</span>
    <span class="smaller" >缩小</span>
  </div>
  <div>
    <p id="para">
    人生若只如初见,何事秋风悲画扇。
    等闲变却故人心,却道故人心易变。
    骊山语罢清宵半,泪雨霖铃终不怨。
    何如薄幸锦衣郎,比翼连枝当日愿。
    </p>
  </div>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript倒计时代码
Aug 12 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 #Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 #Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 #Javascript
全面解析Bootstrap表单样式的使用
Sep 09 #Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 #Javascript
JS与jQuery实现隔行变色的方法
Sep 09 #Javascript
jQuery层次选择器用法示例
Sep 09 #Javascript
You might like
无线电的诞生过程
2021/03/01 无线电
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
Javascript中的this绑定介绍
2011/09/22 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Python 元类实例解析
2018/04/04 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
荷兰本土平价百货:HEMA
2017/10/23 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
预防传染病方案
2014/06/14 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
教师求职自荐信
2015/03/26 职场文书
公司车辆管理制度
2015/08/04 职场文书
网络研修随笔感言
2015/11/18 职场文书
全新239军机修复记
2022/04/05 无线电