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实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
JavaScript中this详解
Sep 01 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
vue中使用GraphQL的实例代码
Nov 04 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开启gzip页面压缩实例代码
2010/03/11 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
简单实现python收发邮件功能
2018/01/05 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
Django models文件模型变更错误解决
2020/05/11 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
日语专业推荐信
2013/11/12 职场文书
检举信的格式及范文
2014/04/04 职场文书
新闻编辑求职信
2014/07/13 职场文书
工作说明书格式
2014/07/29 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
个人先进事迹材料
2014/12/29 职场文书
设置IIS Express并发数
2022/07/07 Servers