码迷,mamicode.com
首页 > 编程语言 > 详细

javascript学习--段落字体的放大与缩小

时间:2014-10-20 02:14:28      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:javascript

注意:javascript中的CSS样式与非javascript中的样式不同,在非javascript中的样式字体大小:font-size,而在javascript中则是fontSize.

在非javascript中的样式中“-”改写为第二个字母大写

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

    .re {

        background-color:gray;

        font-weight:200;

        padding:30px;

    }

    </style>

    <script type="text/javascript">


        window.onload = function () {

            var btnBig = document.getElementById(‘big‘);

            var btnLit = document.getElementById(‘litter‘);

            var btnstyle = document.getElementById(‘btnStyle‘);

            var p1 = document.getElementById(‘pnew‘);

            var fz = 12;

            //放大

            btnBig.onclick = function () {

                

                fz++;

                p1.style.fontSize = fz+ "px";

            }

            //缩小

            btnLit.onclick = function () {

                if (fz > 0) {

                    fz--;

                    p1.style.fontSize = fz + "px";

                }

                else {

                    alert("不能再小了!");

                }

            }

            //设置格式

            btnstyle.onclick = function () {

                p1.className = ‘re‘;

            }

        }


    </script>

</head>

<body>

    <input type="button" id="big" value="增大" />

    <input type="button" id="litter" value="缩小" />

    <input type="button" id="btnStyle" value="设置样式"/>

    <p id="pnew">

        他说,过去两至三周,警方以极度容忍的态度来处理示威人士的非法行为,

        目的是希望有关人士能够冷静下来,

        重新以和平理性和合法的方式来表达他们的诉求。非常遗憾,他们仍然依然故我,

        甚至变本加厉。这些违法行为正在不断伤害香港,令到上学的不能正常上学,上班的不能正常上班,

        做生意的不能正常做生意,生病的人不能正常复诊,各行各业受到非常严重的影响。

    </p>


</body>

</html>


本文出自 “Day Day Up” 博客,请务必保留此出处http://1433189426.blog.51cto.com/8055494/1565730

javascript学习--段落字体的放大与缩小

标签:javascript

原文地址:http://1433189426.blog.51cto.com/8055494/1565730

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!