Question

我编写了一个显示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>

Answer 1

当您第一次执行增长操作时，它会在您启动时使用空值自动使用单位px。您需要先解析.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;
    }
}

动态HTML（字体大小）

1 个答案: