<!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. ajax读取json数据

    首先建立json.txt文件 { "programmers": [ { "firstName": "Brett", "lastNa ...

  2. MyEclipse8.5注册码 到2015年

    Subscriber: onechenProduct ID: E3MP (MyEclipse Professional Subscription)License version: 3.0Full Ma ...

  3. 脚本乐园 Shell中命令行选项和参数的处理

    在Linux的Shell中怎样处理tail -n 10 access.log这样的命令行选项呢?这是被别人问起的一个问题,好好学习了一下,进行总结如下:在bash中,可以用以下三种方式来处理命令行参数 ...

  4. 动态定义数组 .xml

    pre{ line-height:1; color:#3c3c3c; background-color:#d2c39b; font-size:16px;}.sysFunc{color:#627cf6; ...

  5. java 多线程同步

    一.synchronized关键字 同步方法 每个对象都包含一把锁(也叫做监视器),它自动称为对象的一部分(不必为此写任何特殊的代码).调用任何synchronized方法时,对象就会被锁定,不可再调 ...

  6. 1005acm罚时

    ACM国际大学生程序设计竞赛是由国际计算机学会主办的,一项旨在展示大学生创新能力.团队精神和在压力下编写程序.分析和解决问题能力的年度竞赛.参赛队伍最多由三名参赛队员组成,竞赛中一般命题10-13题, ...

  7. VS2013中修改.dll工程项目的.lib和.dll的输出路径

    一个dll工程,生成的两个东西是我们需要的:.lib和.dll,在实际开发过程中我们往往希望这两个东西直接输出到特定文件夹,对于这两个的修改: 设置好之后,对于调用该dll的exe工程,将exe的输出 ...

  8. ajax 访问--提高安全性

    首先受到struts token的启发,产生了客户端发起的ajax请求进行验证的想法,大致思路是客户端每次请求产生一个key ,然后服务端接收到key,然后解析,判断是否为合法key, 对于不带key ...

  9. 【Python学习笔记】字符串操作

    字符串的表示 python中的字符串是一个常量,可以使用单引号'',双引号""或三引号""" """来创建一个字符串常量 ...

  10. hadoop-1.2.0 eclipse插件编译

    linux.windows下通用,亲测. 下面以window为例,假设:hadoop工程目录位于D:\work\eclipse64\hadoop-1.2.0.1.3.0.0,eclipse安装目录为E ...