<!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. 【转】A*寻路算法 C++实现

    头文件:AStarPathFinding #ifndef ASTARPATHFINDING_H #define ASTARPATHFINDING_H #include <queue>//为 ...

  2. git command

    下载github代码 git clone https://github.com/zhoug2020/2015.git 在github上创建仓库: Create a new repository on ...

  3. Selenium2Library系列 keywords 之 _SelectElementKeywords 之 unselect_from_list_by_label(self, locator, *labels)

    def unselect_from_list_by_label(self, locator, *labels): """Unselects `*labels` from ...

  4. 句柄（handle）

    < Back 句柄,在windows编程中用来标识: *.模块(module) *.任务(task) *.实例(instance) *.文件(file) *.内存块(block of memor ...

  5. linux grub

    grub 是目前使用最广泛的linux引导装载程序,旧的lilo这个引导装载程序很少见了,grub优点: 支持较多哦的文件系统,可以使用grub主程序在文件系统中查找内核文件名 启动的时候,可以自行编 ...

  6. （转载）OC学习篇之---类目的概念和使用

    上一篇文章介绍了OC中的@class关键字的使用,这一篇我们介绍一下,OC中的一个特有的亮点:类目 首先我们来看一下场景,如果我们现在想对一个类进行功能的扩充,我们该怎么做? 对于面向对象编程的话,首 ...

  7. C语言——内存分配

    1.在C语言的运行过程中,需要内存来存储数据.C语言使用的内存总体可以分为两类:一类是静态区,一类是动态区.2.静态数据存储区包含:只读数据区.已初始化的读写数据区.未初始化的读写数据区     动态 ...

  8. Netmask v. Address Prefix Length

    Netmask Address Prefix Length Hosts / Class C's / Class B's / Class A's (Class C) / / , / , / , / , ...

  9. Eralng 小知识点

    文件属性 提取方法:Module:module_info/1 头文件 包含头文件 -include(FileName). %% FileName为绝对路径或相对路径 引入库中包含文件 -include ...

  10. 【openstack报错】【因更新包而致】IncompatibleObjectVersion: Version 1.9 of Instance is not supported

    [时间]2014年2月18日 [平台]ubuntu 12.04.3 openstack havana [日志]/var/log/upstart/nova-compute.log  内容如下: ERRO ...