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之load()方法
Oct 12 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
js文字横向滚动特效
Nov 11 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
详解Vue组件之间通信的七种方式
Apr 14 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
PHP自定义函数收代码
2010/08/01 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
vue.js 微信支付前端代码分享
2018/02/10 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
回顾Javascript React基础
2019/06/15 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
Python类属性的延迟计算
2016/10/22 Python
python适合做数据挖掘吗
2020/06/16 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
军训教官感言
2014/03/02 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
军训口号
2014/06/13 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python