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 相关文章推荐
页面实时更新时间的JS实例代码
Dec 18 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
优化使用mysql存储session的php代码
2008/01/10 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
python实现超市商品销售管理系统
2019/10/25 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
Python 读取位于包中的数据文件
2020/08/07 Python
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
2015年双拥工作总结
2015/04/08 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android