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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 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/03 冲泡冲煮
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
为超链接加上disabled后的故事
2010/12/10 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
Python中__call__用法实例
2014/08/29 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
Python标准库itertools的使用方法
2020/01/17 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
python实现文法左递归的消除方法
2020/05/22 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
公司介绍信范文
2015/01/31 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
centos7安装mysql5.7经验记录
2022/05/02 Servers
利用Java连接Hadoop进行编程
2022/06/28 Java/Android