zoukankan      html  css  js  c++  java
  • jquery网页字体变大小

    <!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 {300px; margin:100px; }
    .msg_caption { 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{ 300px; height:80px;height:100px;border:1px solid #000;}
    

      

  • 相关阅读:
    MVC @Html.TextBox 添加属性和样式
    当项目中出现“未能找到与此解决方案关联的源代码管理提供程序。项目将视为不受源代码管理”
    MVC视图中读取ViewBag传递过来的HashTable表数据
    使用NPOI导入导出标准的Excel
    网站文件下载代码
    C# 刷新页面浏览次数(点击量)+1
    sed
    Shell变量的取用、删除、取代与替换
    non-member function cannot have cv-qualifier
    awk学习
  • 原文地址:https://www.cnblogs.com/a757956132/p/4997098.html
Copyright © 2011-2022 走看看