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 闭包引起的IE内存泄露分析
May 23 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 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
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
vue组件间通信解析
2017/03/01 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
跟老齐学Python之??碌某?? target=
2014/09/12 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
详解Python中的文本处理
2015/04/11 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
校园十大歌手策划书
2014/02/01 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
学生鉴定评语大全
2014/05/05 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
婚宴主持词
2015/06/30 职场文书
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers
Hive HQL支持2种查询语句风格
2022/06/25 数据库