0

我编写了一个显示 2 个按钮和一个文本的代码。当我们单击按钮时，“GROW”文本的大小应该会增大，当我们单击“SHRINK”时，文本的大小应该会减小。但这仅适用于单击一次。当我第二次单击时，不会调用这些函数。为什么会这样？这是它的代码..

<html>
<head>
    <script type="text/javascript">
        function Grow()
        {
            var a=document.getElementById(1);
            a.style.fontSize=a.style.fontSize+50;

        }
        function Shrink()
        {
            var a=document.getElementById(1);
            a.style.fontSize=20;

        }
    </script>
</head>
<body>
    <input type="button" value="grow" onclick="Grow()">
    <input type="button" value="shrink" onclick="Shrink()">
    <p id="1"> Hello </p>
</body>

4

1 回答 1

3

当您第一次执行增长操作时，它会自动使用单位 px，因为您开始使用 null 值。您需要先解析 .fontSize 的值，然后才能对其执行算术运算。尝试这个...

parseInt(a.style.fontSize.replace('px', ''));

要获得一个数值，您可以对其执行算术运算。

在全...

function Grow()
{
    var a=document.getElementById(1);

    // Get a number we can perform arithmetic on
    size = parseInt(a.style.fontSize.replace('px',''));

    // Additional check needed because original dimensions not specified
    if (!isNaN(size)) { // If we now have a number we can use
        a.style.fontSize=size+50;
    } else { // Otherwise, set to 50 (assuming we are starting from 0px)
        a.style.fontSize=50;
    }
}
于 2012-11-15T14:04:32.203 回答