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 drag拖动代码
Dec 09 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
微信小程序实现简单表格
Feb 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
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
详谈python http长连接客户端
2017/06/12 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
太太口服液广告词
2014/03/20 职场文书
排查整治工作方案
2014/06/09 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
Python道路车道线检测的实现
2021/06/27 Python