1

这是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";
        }

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

4

2 回答 2

1

There are several issues with the code, and partly difficult to track down, but you can get started with debugging by using Developer Tools in your browser. You typically enter them by pressiin the F12 key. The “Console” pane of the tools will show JavaScript errors and other diagnostics.

You will then first see that the colon : causes a syntax errors. In JavaScript, you need to use the assignment operator =.

Having fixed this, you will see that clicking on the button will cause an error message about body.style being undefined. That’s because you have called the document.getElementsByTagName function that returns an array of elements, not a single element. The simplest fix to use just document.body, which refers to the body element.

The remaining bug is more tricky and causes somewhat varying diagnostics in browsers, like “TypeError: size is not a function” in Firefox. The reason is that the invocation size() is inside an event handler in the <input> tag, and there the implied context is the <input> element node. And that node has the size property, which reflects to the HTML markup attribute size. This property is defined even though the markup does not have an explicit attribute; it is then defaulted to a browser-dependent value, typically 20. Anyway, in this context the identifier size denotes that property, which has a numeric value, not a function.

There are two simple ways to fix this bug. You can change the invocation size() to window.size(), thereby referring to the globally defined identifier size (it is global, i.e. a property of the window object, since you define a function with that name at the topmost level). Alternatively, you can change the function name to something else, just avoiding anything that could be a property of the <input> element node. You could use Size for example, or changeBackgroundPosition. So in HTML you could have

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

and in JavaScript

function changeBackgroundPosition() {
  document.body.style.backgroundPosition = "0 30px";
}
于 2013-07-08T05:10:42.360 回答
1

你想要的是：

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

解释：

访问body使用document.body

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

于 2013-07-08T04:27:22.023 回答