<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

 <!--   引入jQuery -->

 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

 <script type="text/javascript">

    $(function(){

        $("span").click(function(){

            var thisEle = $("#para").css("font-size");

            var textFontSize = parseFloat(thisEle , 10);
　　　　　　　　　　//parseFloat(第一个参数，10)中的10表示转为10进制  
                       http://www.w3school.com.cn/jsref/jsref_parseFloat.asp
　　　　　　 var unit = thisEle.slice(-2); //获取单位 
                        //arrayObject.slice(start,end)方法可从已有的数组中返回选定的元素。

                            //start    必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

                            //end    可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果                                              //这个参数是负数，那么它规定的是从数组尾部开始算起的元素。 http://www.w3school.com.cn/jsref/jsref_slice_array.asp

            var cName = $(this).attr("class");

            console.info("thisEle:" + thisEle + "   textFontSize:" + textFontSize + "   unit:" + unit + "   cName:" + cName);
             //thisEle:16px   textFontSize:16   unit:px   cName:bigger 

            if(cName == "bigger"){

                   if( textFontSize <= 22 ){

                        textFontSize += 2;

                    }

            }else if(cName == "smaller"){

                   if( textFontSize >= 12  ){

                        textFontSize -= 2;

                    }

            }

            $("#para").css("font-size",  textFontSize + unit);

        });

    });

  </script>

</head>

<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>

</html>

css

* { margin:0; padding:0; }

.msg {width:300px; margin:100px; }

.msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}

.msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;font-size:12px;color:white; }

.msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}

　　

jquery网页字体变大小的更多相关文章

  1. jQuery控制网页字体大小和肤色

    在一些网站上经常看到有控制网页肤色和字体大小的功能,接下来,我们将用两个例子来实现这两个功能. 网页字体大小 首先我们在网页中添加一些被控制大小的文字和字体控制的按钮. <!DOCTYPE> ...

  2. SpannableString 转换局部字体大小，但在EditText测量之前设置内容，测量高度为，字体变小之前的高度

    public void setHint(@NonNull String hint, @Nullable CharSequence subHint) { this.hint = hint; if (su ...

  3. iphone手机在网页返回上一页时，部分字体变大问题

    最近做一个项目是,发现了一个iphone的兼容性问题,在返回上一页后,部分字体会变大,刷新就会正常. 经过总结,发现都是span标签里面的字体变大.经过查询发现,需要给span添加一个属性:displ ...

  4. Type.js – 帮助你更好的控制网页字体排版

    Type.js 是一款很好的网页字体排版工具.它可以让你使用新的 CSS 属性,在网页上试下更精细的排版控制.设置很简单.上传 type.js 到您的网站,并在你的 HTML 链接中引用.接下来,你就 ...

  5. Font Combiner – 自定义网页字体和图标生成工具

    Font Combiner 是一个功能丰富的 Web 字体生成工具和字体改进工具,提供字距调整.构造子集.各种提示选项和自定义字体字形组合.您可以生成您自己的自定义字体的格式和文件大小. 另外还有成千 ...

  6. 【技术贴】xp任务栏字体变大变小

    今天远程到服务器上,发现任务栏字体变小了,百度了很久,发现百度就是个渣渣,什么答案都搜不到.就自己摸索了一下. 方法一: 桌面右击属性-外观-字体大小, 下拉匡 方法二 :桌面右击[属性]-[外观]- ...

  7. 网页字体在Frontpage2000制作网页中的讲解

    运用HTML,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到CSS.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力. ...

  8. 解决UC手机字体变大的有关问题

    解决UC手机字体变大的问题 UC手机浏览器在识别到页面文字很多的情况下会自动放大字体优化阅读体验,如果要关闭这个功能需要在网页头部添加: <meta name="wap-font-sc ...

  9. Chrome字体变粗

    如图.解决方案,看看CSS中用了什么字体,卸载某个字体. 因为我装了一个新的字体,CSS中有这个字体的网页都会变粗.删掉这个字体就恢复正常了

随机推荐

  1. 为Linux版本Oracle 11gR2配置HugePage

    HugePage是Oracle在Linux版本下一种性能优化手段.对于共享内存区域(SGA)的数据库系统,Oracle通常都推荐在操作系统层面配置上HugePage,为Oracle实例准备更大的可用共 ...

  2. 一条sql导致数据库整体性能下降的诊断和解决的全过程

    今天早上一来,数据库load就比往常高了许多.想想数据库唯一的变化是昨天早上我曾经重新分析过数据库对象. [@more@] 发现数据库load很高,首先看top发现没有特别异常的进程,在数据库中适时抓 ...

  3. suse10的网络配置（静态IP）

    感觉跟fedora的差别还是蛮大的, 主要是配置文件的不同, 尤其是默认路由, 多了一个单独的文件ifroute-xxx    suse10的网卡配置文件在/etc/sysconfig/network ...

  4. suse linux中apache+php服务器安装

    主站下载源码 tar zxvf httpd-2.2.4.tar.bz2cd httpd-2.2.4 ./configure --prefix=/usr/local/apache --sysconfdi ...

  5. cocos2dx+lua中cc.EventListenerMouse:create()的bug

    今天在调试项目的时候用到了鼠标事件的监听 在创建事件监听器的时候出了问题 cc.EventListenerMouse:create() 这句返回值为nil 原来这是cocos2dx引擎的一个bug,t ...

  6. 插件二之页面加载进度条pace.js

    关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel=" ...

  7. DHTML 教程学习进度备忘

    书签:跳过:另外跳过的内容有待跟进 __________________ 学习资源:W3School. _________________ 跳过的内容: 1.这个学习进度和前面几个学习进度,只是学习了 ...

  8. ps制作哈7海报字体

    模仿也需要较强的功底和分析思路.如下面的教程,作者模仿的是电影海报字.文字构造虽不复杂,不过思路不对的话就容易走弯路.最终效果 1.先来分析文字的构造,大致由两部分组成,一部分是浮雕字,另一部分是质感 ...

  9. [转] 请别再拿“String s = new String("xyz");创建了多少个String实例”来面试了吧

    这帖是用来回复高级语言虚拟机圈子里的一个问题,一道Java笔试题的. 本来因为见得太多已经吐槽无力,但这次实在忍不住了就又爆发了一把.写得太长干脆单独开了一帖. 顺带广告:对JVM感兴趣的同学们同志们 ...

  10. 一行 Python 实现并行化 -- 日常多线程操作的新思路

    春节坐在回家的火车上百无聊赖,偶然看到 Parallelism in one line 这篇在 Hacker News 和 reddit 上都评论过百的文章,顺手译出,enjoy:-) http:// ...