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 相关文章推荐
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
Node.JS如何实现JWT原理
Sep 18 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 MemCached 高级缓存应用代码
2010/08/05 PHP
浅析php数据类型转换
2014/01/09 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
继续学习javascript闭包
2015/12/03 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
python安装sklearn模块的方法详解
2020/11/28 Python
2013年大学生的自我鉴定
2013/10/24 职场文书
高中军训感言200字
2014/02/23 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
新教师岗前培训方案
2014/06/05 职场文书
大学专科自荐信
2014/06/17 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
电工生产实习心得体会
2016/01/22 职场文书
关于感恩的作文
2019/08/26 职场文书
mysql 索引合并的使用
2021/08/30 MySQL