<!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. order by多个字段对索引的影响

    某前台sql语句,简化后如下SELECT products_name,products_viewed FROM `products_description` ORDER BY products_vie ...

  2. apple-touch-icon,shortcut icon和icon的区别

    apple-touch-icon 可以了解到这是一个类似网站favicon的图标文件,用来在iphone和ipod上创建快捷键时使用. 这个文件应当是png格式,57x57像素大小,放在网站根目录之下 ...

  3. 解决 winform 界面对不齐 z

    一个winform的程序,本机上界面对得很齐,到一到客户的机器上就惨不忍睹,一番研究后搞定: 1. AutoScaleMode = None 2. BackgroundImageLayout = No ...

  4. devexpress datagrid 与imageEdit以及如何存图片到数据库 z

    http://blog.csdn.net/haoyujie/article/details/41277703 首先建立了一个数据库的表,这个表中,有一个字段是image类型(SQL Server数据库 ...

  5. Android Application 深入分析

    http://blog.csdn.net/rain_butterfly/article/details/37598939

  6. PostgreSQL的备份和恢复

    关于PostgreSQL的备份和恢复详细信息请参阅<PostgreSQL中文文档>. 备份: #pg_dump --username=postgres v70_demo > v70_ ...

  7. Linux基本命令（8）网络操作的命令

    网络操作命令 命令 功能 命令 功能 ftp 传送文件 telnet 远端登陆 bye 结束连线并结束程序 rlogin 远端登入 ping 检测主机 netstat 显示网络状态 8.1 ftp命令 ...

  8. Anychart 破解备注

    由于项目里用到anychart组件,第一次破解了,后来升级再破解时忘了方法,所以在这里备注一下. 首先需要的工具: swfc  (http://www.buraks.com/swifty/swfc.h ...

  9. windows中安装python

    windows中安装python 在windows中安装python的步骤如下. 1.下载python的安装包 python的安装包地址为: https://www.python.org/ftp/py ...

  10. MFC知识点（DDX_Control 与 DDX_Text ，ON_COMMAND和ON_MESSAGE）

    1.DDX_Control 与 DDX_Text 区别 DDX_TEXT()的作用可以理解为把字符串变量和控件的文本(WindowText)关联起来, DDX_Control()的作用可以理解为把变量 ...