Question

这是html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <script type="text/javascript" src="temp.js">
    </script>
    <style type="text/css">
        body {
            background-image: url(image.jpg);
            background-repeat: no-repeat;
            background-position: 0px 100px;
        }
    </style>
    <body>
        <p>This is a test paragraph to fill space</p>
        <input type="button" onClick="size()"/>
    </body>
</html>

和javascript

function size() {
        var body = document.getElementsByTagName("body");
        body.style.backgroundPosition: "0px 30px";
        }

但由于某种原因，当我点击按钮时没有任何反应。有人知道什么不起作用吗？

Answer 1

你想要的是：

function size() {
        document.body.style.backgroundPosition = "0px 30px";
}

说明：

使用body

访问document.body

body.style.backgroundPosition: "0px 30px";应为body.style.backgroundPosition = "0px 30px";

Answer 2

代码存在一些问题，部分难以追踪，但您可以在浏览器中使用开发人员工具开始调试。您通常按F12键输入它们。工具的“控制台”窗格将显示JavaScript错误和其他诊断信息。

然后，您将首先看到冒号:导致语法错误。在JavaScript中，您需要使用赋值运算符=。

修复此问题后，您会看到单击该按钮将导致关于body.style未定义的错误消息。那是因为你调用了document.getElementsByTagName函数来返回元素数组，而不是单个元素。最简单的解决方法是仅使用document.body，它引用body元素。

剩下的bug更棘手，并且在浏览器中导致一些不同的诊断，例如Firefox中的“TypeError：size is not function”。原因是调用size()位于<input>标记中的事件处理程序内，隐含的上下文是<input>元素节点。该节点具有size属性，该属性反映到HTML标记属性size。即使标记没有显式属性，也会定义此属性;然后默认为依赖于浏览器的值，通常为20.无论如何，在此上下文中，标识符size表示该属性，该属性具有数值，而不是函数。

有两种简单的方法可以解决这个问题。您可以将调用size()更改为window.size()，从而引用全局定义的标识符size（它是全局的，即window对象的属性，因为您定义了在最顶层的那个名称的函数）。或者，您可以将函数名称更改为其他名称，只是避免任何可能是<input>元素节点属性的内容。您可以使用Size或changeBackgroundPosition。所以在HTML中你可以有

<input type="button" value="Change" onClick="changeBackgroundPosition()">

和JavaScript

function changeBackgroundPosition() {
  document.body.style.backgroundPosition = "0 30px";
}

如何使用javascript更改网站上的背景图像位置？

2 个答案: