改变字体大小 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="jquery-1.8.3.min.js" type="text/javascript"></script>

    <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 type="text/javascript">
        $(function() {
            $("span").click(function() {
                var thisEle = $("#para").css("font-size"); //字体大小:16px
                var textFontSize = parseFloat(thisEle, 10); //parseFloat:javascript函数:只有字符串中的第一个数字会被返回,第二个参数表进制。16
                var unit = thisEle.slice(-2); //获取单位px
                var cName = $(this).attr("class");
                if (cName == "bigger") {
                    textFontSize += 2;
                } else if (cName == "smaller") {
                    textFontSize -= 2;
                }
                $("#para").attr("style", "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>

 

posted on 2013-01-18 10:58  .NET每天一小步  阅读(153)  评论(0)    收藏  举报