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 29 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 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构造函数实例讲解
2013/11/13 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
php可变长参数处理函数详解
2017/02/22 PHP
常用的javascript function代码
2008/05/23 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
原生JavaScript实现购物车
2021/01/10 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
python查询sqlite数据表的方法
2015/05/08 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
python实现简单神经网络算法
2018/03/10 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
HTML5未来发展趋势
2016/02/01 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
庆祝儿童节标语
2014/10/09 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技