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中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
JS原型与继承操作示例
May 09 Javascript
详解React的回调渲染模式
Sep 10 Javascript
js实现扫雷源代码
Nov 27 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操作路由器实现方法示例
2019/04/27 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
js常见表单应用技巧
2008/01/09 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
如何提高数据访问速度
2016/12/26 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
JavaScript 自定义事件之我见
2017/09/25 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
python 自动提交和抓取网页
2009/07/13 Python
python简单程序读取串口信息的方法
2015/03/13 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
python实现扫描日志关键字的示例
2018/04/28 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
女子职高个人自荐书
2014/02/01 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
学生会自荐信
2019/05/16 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
详解Python魔法方法之描述符类
2021/05/26 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android