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 相关文章推荐
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
webpack打包js的方法
Mar 12 Javascript
a标签调用js的方法总结
Sep 05 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多个版本的分析解释
2011/07/21 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
原生js实现轮播图
2017/02/27 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
js闭包学习心得总结
2018/04/17 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
详解Vue This$Store总结
2018/12/17 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
Python使用gRPC传输协议教程
2018/10/16 Python
python链表类中获取元素实例方法
2021/02/23 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
单位消防安全制度
2014/01/12 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
总经理助理岗位职责
2015/01/31 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
一行代码python实现文件共享服务器
2021/04/22 Python
解析MySQL binlog
2021/06/11 MySQL
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL