js代码学习17--控制字体大小

来源：互联网发布：禅道 linux 启动编辑：程序博客网时间：2024/06/06 18:42

<!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.js" type="text/javascript"></script> <script type="text/javascript">    $(function(){        $("span").click(function(){            var thisEle = $("#para").css("font-size");             var textFontSize = parseInt(thisEle , 10);            var unit = thisEle.slice(-2); //获取单位            var cName = $(this).attr("class");            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;}

阅读全文

0 0