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利用初始化数据装配模版的实现代码
Nov 17 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
javascript数据类型示例分享
Jan 19 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
php中变量及部分适用方法
2008/03/27 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
基于python实现KNN分类算法
2020/04/23 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
python中format函数如何使用
2020/06/22 Python
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
一套Delphi的笔试题二
2013/05/11 面试题
服装设计行业个人的自我评价
2013/12/20 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
2014年副班长工作总结
2014/12/10 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
三方合作意向书范本
2015/05/09 职场文书
golang正则之命名分组方式
2021/04/25 Golang
Docker下安装Oracle19c
2022/04/13 Servers
python游戏开发Pygame框架
2022/04/22 Python
设置IIS Express并发数
2022/07/07 Servers