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的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
详解JS中的attribute属性
Apr 25 Javascript
JavaScript表单验证实现代码
May 22 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
javascript实现评分功能
Jun 24 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
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
面试常见的js算法题
2017/03/23 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
Python 的 with 语句详解
2014/06/13 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python如何生成树形图案
2018/01/03 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
2014年党务公开方案
2014/05/08 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
如何解决php-fpm启动不了问题
2021/11/17 PHP
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js
Hive常用日期格式转换语法
2022/06/25 数据库