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 相关文章推荐
js 页面执行时间计算代码
Mar 04 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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微信公众号开发之二级菜单
2018/10/20 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
python异步任务队列示例
2014/04/01 Python
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python递归函数定义与用法示例
2017/06/02 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
python时间time模块处理大全
2020/10/25 Python
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
公司员工检讨书
2014/02/08 职场文书
天猫活动策划方案
2014/08/21 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers