需要一个解决方案来增加网站上字体大小的减少

时间:2015-07-13 22:09:32

标签: javascript

我正在尝试在我的网站上添加一个用户可以更改字体大小的选项。我在youtube上发现了一个视频(https://www.youtube.com/watch?v=MOgBW3WKeCc)。但我不知道为什么我的剧本不起作用。

这是我的代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        $(document).ready(function() {

            $('#fontincrease').click(function() {
                modifyFontSize('increase');
            });
            $('#fontdecrease').click(function() {
                modifyFontSize('decrease');
            });
            $('#fontreset').click(function() {
                modifyFontSize('reset');
            });

            function modifyFontSize(flag) {
                var divElement = $('#entrypbody');
                var currentFontSize = parseInt(divElement.css('font-size'));

                if (flag =='increase') {
                    currentFontSize +=2;
                }; else if (flag ='decrease') {
                    currentFontSize -=2;
                }; else currentFontSize = 15;

                divElement.css('font-size', currentFontSize);
            }
        });
    </script>
    <style type="text/css">
        .paragraph {
            font-size: 15px;
        }
    </style>
</head>
<body>
<div>
    Font Size: <a id="fontincrease" href="#">increase</a> <a id="fontdecrease" href="#">decrease</a> <a id="fontreset" href="#">reset</a>
</div>
<div id="entrypbody" class="paragraph" >
    <ul>
        <li>unorderd list 1</li>
        <li>unorderd list 2</li>
        <li>unorderd list 3</li>
        <li>unorderd list 4</li>
    </ul>
</div>
</body>
</html>

任何人都可以帮助我摆脱这个问题吗?

2 个答案:

答案 0 :(得分:0)

你的if语句中有太多的冒号。这是好方法:

if (flag == 'increase') {
    currentFontSize +=2;
} else if (flag == 'decrease') {
    currentFontSize -=2;
} else {
    currentFontSize = 15;
}

答案 1 :(得分:0)

您的代码中有3个错误,请阅读评论。

1,2)你不应该在if语句块之间使用分号

请参阅: http://www.w3schools.com/js/js_if_else.asp

3)您应该使用 == 来代替 = ,因为 = 用于将值设置为var。

请参阅: http://www.w3schools.com/js/js_operators.asp

 if (flag =='increase') {
    currentFontSize +=2;
     }; else if (flag ='decrease') { // 2 errors here (you should delete the semicolon) then (you should use == to compare instead of = ) 
     currentFontSize -=2;
     }; else currentFontSize = 15; // 1 error here (you should delete the semicolon)

修改后

if (flag =='increase') {
    currentFontSize +=2;
     } else if (flag =='decrease') { // edited 
     currentFontSize -=2;
     } else currentFontSize = 15; // edited