改变字体大小

来源：互联网发布：天下三女号捏脸数据编辑：程序博客网时间：2024/05/16 00:58
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <style type="text/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;        }    </style>    <script src="JS/jquery-1.3.2.js" type="text/javascript"></script>    <script type="text/javascript">        $(function() {            $("span").click(function() {                //先获取原始的字体大小                var thisEle = $("#para").css("font-size");                // 获取文字大小                //alert(thisEle);                var textFontSize = parseFloat(thisEle, 10);                // 获取单位                var unit = thisEle.slice(-2);                // 获取点击标签的class                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>    <form id="form1" runat="server">    <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>    </form></body></html>