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 相关文章推荐
IE8 原生JSON支持
Apr 13 Javascript
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
微信小程序文字显示换行问题
Jul 28 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 构造函数construct的前下划线是双的_
2009/12/08 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python获取当前路径实现代码
2017/05/08 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python实现画一颗树和一片森林
2018/06/25 Python
python中字符串内置函数的用法总结
2018/09/13 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
python pip如何手动安装二进制包
2020/09/30 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
优秀应届生推荐信
2013/11/09 职场文书
高中教师评语大全
2014/04/25 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书