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 相关文章推荐
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
node使用request请求的方法
2019/12/20 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
python之yield和Generator深入解析
2019/09/18 Python
详解python statistics模块及函数用法
2019/10/27 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
pandas按条件筛选数据的实现
2021/02/20 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
《画》教学反思
2014/04/14 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
人事任命通知书
2015/04/21 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
Golang中channel的原理解读(推荐)
2021/10/16 Golang
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL
Nginx配置使用详解
2022/07/07 Servers