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

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

javascript html

如何使用javascript更改网站上的背景图像位置？,javascript,html,background-image,Javascript,Html,Background Image,这是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 {

这是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>

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

你想要的是：

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

说明：

使用

文档访问正文
。正文

body.style.backgroundPosition:“0px 30px”应该是body.style.backgroundPosition=“0px 30px”
代码中有几个问题，部分问题很难找到，但您可以使用浏览器中的开发人员工具开始调试。您通常通过按F12键输入它们。工具的“控制台”窗格将显示JavaScript错误和其他诊断
然后，您将首先看到冒号：
导致语法错误。在JavaScript中，需要使用赋值运算符=

修复此问题后，您将看到单击该按钮将导致一条关于body.style
未定义的错误消息。这是因为您调用了document.getElementsByTagName
函数，该函数返回一个元素数组，而不是单个元素。最简单的修复方法就是使用document.body
，它引用body
元素
剩下的bug更加棘手，在浏览器中会导致不同的诊断，比如Firefox中的“TypeError:size不是一个函数”。原因是调用size（）
在
标记的事件处理程序中，隐含的上下文是
元素节点。该节点具有size
属性，该属性反映到HTML标记属性size
。即使标记没有显式属性，也会定义此属性；然后默认为浏览器相关值，通常为20。无论如何，在此上下文中，标识符size
表示具有数值的属性，而不是函数
有两种简单的方法可以修复此错误。您可以将调用size（）
更改为window.size（）
，从而引用全局定义的标识符size
（它是全局的，即window
对象的属性，因为您在最顶层定义了具有该名称的函数）。或者，您可以将函数名更改为其他名称，只需避免任何可能是
元素节点属性的内容。例如，您可以使用Size
或changeBackgroundPosition
。因此，在HTML中，您可以
<input type="button" value="Change" onClick="changeBackgroundPosition()">

只使用document.body
引用body元素更简单。@JukkaK.Korpela:谢谢！更新。
<input type="button" value="Change" onClick="changeBackgroundPosition()">

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