jQuery之字体大小的设置方法


Posted in Javascript onFebruary 27, 2014

先获取字体大小,进行处理。

再将修改的值保存。

slice() 方法可从已有的数组中返回选定的元素。
arrayObject.slice(start,end)。
start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

end   可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

jQuery代码如下:

<script type="text/javascript">
    $(function(){
        $("span").click(function(){
            //获取para的字体大小
            var thisEle = $("#para").css("font-size"); 
            //parseFloat的第二个参数表示转化的进制,10就表示转为10进制
            var textFontSize = parseFloat(thisEle , 10);
            //javascript自带方法
            var unit = thisEle.slice(-2); //获取单位
            var cName = $(this).attr("class");
            if(cName == "bigger"){
                    textFontSize += 2;
            }else if(cName == "smaller"){
                    textFontSize -= 2;
            }
            //设置para的字体大小
            $("#para").css("font-size",  textFontSize + unit );
        });
    });
  </script>

html代码如下:
<body>
<div class="msg">
    <div class="msg_caption">
        <span class="bigger" >放大</span>
        <span class="smaller" >缩小</span>
    </div>
    <div>
        <p id="para" >
        This is some text. This is some text. This is some text. This is some text. This
        is some text. This is some text. This is some text. This is some text. This is some
        text. This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text. This
        is some text. This is some text.
        </p>
    </div>
</div>
</body>
Javascript 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
什么是JavaScript
Aug 13 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 #Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 #Javascript
jquery退出each循环的写法
Feb 26 #Javascript
jQuery中的val()示例应用
Feb 26 #Javascript
jquery live()调用不存在的解决方法
Feb 26 #Javascript
js获得参数的getParameter使用示例
Feb 26 #Javascript
父节点获取子节点的字符串示例代码
Feb 26 #Javascript
You might like
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
vue实现页面加载动画效果
2017/09/19 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
对python中的装包与解包实例详解
2019/08/24 Python
python中自带的三个装饰器的实现
2019/11/08 Python
Python API自动化框架总结
2019/11/12 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
酒店保安领班职务说明书
2014/03/04 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
个人工作年终总结
2015/03/09 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
创业计划书之酒吧
2019/12/02 职场文书
导游词之西安骊山
2019/12/03 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python