Question

    <!DOCTYPE html>
    <html>
        <body>
            <p id="demo">Hi.</p>
            <script>
                document.getElementById("demo").innerHTML = "Hello world!";
                document.getElementById("demo").style.font-size = "300px";
            </script>
        </body>
    </html>

为什么此代码在网页上显示Hi.而不是Hello world!？

Answer 1

您的代码有语法错误。而不是字体大小，您应该使用 fontSize 。

这是您的此修复程序片段。

    <!DOCTYPE html>
    <html>
        <body>
            <p id="demo">Hi.</p>
            <script>
                document.getElementById("demo").innerHTML = "Hello world!";
                document.getElementById("demo").style.fontSize = "300px";
            </script>
        </body>
    </html>

希望对您有帮助。

----编辑----

@Roddy建议：您不能在点表示法中使用破折号，因为属性名称是标识符。例如，“-”字符可用于减法。而且在CSS中它可以正常工作，因为它只是类名。

但是，出于好奇，您也可以这样写：

document.getElementById("demo").style["font-size"] = "300px";

通过这种方式，您可以像CSS一样编写它，但是由于以其他方式获取此属性，因此您不受点表示法规则的束缚。

Answer 2

metaDesign的答案是正确的，问题是fontSize属性的名称不正确。在JavaScript中引用时，连字属性总是变成驼峰式的情况。

但是，这在脚本部分提出了一个有趣的观点。整个脚本节必须成功运行才能使其生效。本质上，它们在页面的副本上运行，然后仅在整个脚本完成时才将其交换。相反，如果您的文件是以下文件，则您会看到第一个脚本可以正常工作，但是第二个脚本却无济于事，因为其中存在错误。

<!DOCTYPE html>
<html>
    <body>
        <p id="demo">Hi.</p>
        <script>
            document.getElementById("demo").innerHTML = "Hello world!";
            // Demonstrate correct way to change font-size property.
            document.getElementById("demo").style.fontSize = "30px";
        </script>
        <script>
            document.getElementById("demo").innerHTML = "Correct, but still has no effect.";
            // This throws an exception, so nothing in this script tag affects anything
            document.getElementById("demo").style.font-size = "300px";
        </script>
    </body>
</html>

Answer 3

删除“字体大小”中的连字符并大写's'

document.getElementById("demo").innerHTML = "Hello world!";
document.getElementById("demo").style.fontSize = "300px";

<p id="demo">Hi.</p>

Answer 4

在调用脚本之前会显示Hi。触发器附加到脚本后，可能会显示Hello World。

代码显示“嗨”。在网页上，而不是预期的“ Hello world！”

4 个答案: