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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
玩转vue的slot内容分发
Sep 22 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
2020最新CPU的性能排名
2020/04/02 数码科技
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
javaScript基础详解
2017/01/19 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
python 显示数组全部元素的方法
2018/04/19 Python
python操作mysql代码总结
2018/06/01 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
Python爬取网页信息的示例
2020/09/24 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
天游软件面试
2013/11/23 面试题
如何利用find命令查找文件
2016/11/18 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
采购主管工作职责
2013/12/12 职场文书
上课玩手机检讨书
2014/02/08 职场文书
单位委托书范本
2014/04/04 职场文书
青年文明号口号
2014/06/17 职场文书
老干部工作汇报材料
2014/10/28 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
海上钢琴师观后感
2015/06/03 职场文书
团结主题班会
2015/08/13 职场文书