<!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. C# "error CS1729: 'XXClass' does not contain a constructor that takes 0 arguments"的解决方案

    出现这种错误的原因时,没有在子类的构造函数中指出仅有带参构造函数的父类的构造参数. 具体来讲就是: 当子类要重用父类的构造函数时, C# 语法通常会在子类构造函数后面调用 : base( para_t ...

  2. MVC的路由

    MVC的路由包括以下几部分 路由名称,路由URL,路由的初始值,路由的约束,路由的命名空间 routes.MapRoute( name: "Default", url: " ...

  3. 数据结构(11) -- 邻接表存储图的DFS和BFS

    /////////////////////////////////////////////////////////////// //图的邻接表表示法以及DFS和BFS //////////////// ...

  4. pthread_cond_timedwait时间设置

    最近工作中需要在ACodec中起一个pthread,并每间隔100ms统计一次buffer的状态,在程序中使用pthread_cond_timedwait来设置时间间隔,但在使用中发现当超时时间设置成 ...

  5. 安装phonegap

    1.安装nodejs http://nodejs.org/ 2.安装git www.git-scm.com/download 3.安装jdk http://www.oracle.com/technet ...

  6. openstack neutron网络主机节点网口配置 liberty版本之前的

  7. 【转】Eclipse去除js(JavaScript)验证错误

    这篇文章主要是对Eclipse去除js(JavaScript)验证错误进行了介绍.在Eclipse中,js文件常常会报错.可以通过如下几个步骤解决 第一步:去除eclipse的JS验证:将window ...

  8. 使用avalon 实现一个订座系统

    avalon对交互非常复杂的WEB应用具有天然的优势,它拥有两大神器:计算属性(这相当于后端WPF的DependencyProperty)与$watch回调. 我们的订餐系统的要求如下,它有一个总额统 ...

  9. 深入剖析AutoreleasePool

    [深入剖析AutoreleasePool] Objc的AutoreleasePool是一个首尾相连的内存链接,每块大小为1页(32位机上为4kb). 上面可以看到,parent指向父Pool,chil ...

  10. 让MySQL支持中文

    这两天在学习webpy,把webpy的一个blog例子扒下来学习一下,默认创建的table当存入中文的时候是乱码,研究了一下这个问题. 1,创建table的时候就使用utf8编码 举个例子: crea ...