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 相关文章推荐
为javascript添加String.Format方法
Aug 11 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
js+html获取系统当前时间
Nov 10 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
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 引用是个坏习惯
2010/03/12 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
Python用GET方法上传文件
2015/03/10 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
python 的topk算法实例
2020/04/02 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
为什么需要版本控制?
2013/08/08 面试题
德育标兵事迹材料
2014/08/24 职场文书
财务会计岗位职责
2015/02/03 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书