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

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

<!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"; 
     }

但由于某些原因，当我按一下按钮没有任何反应。任何人都知道什么不起作用？

来源

2013-07-08 Matthew

你想要的是：

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

说明：

访问body使用document.body

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

来源

2013-07-08 04:27:22

这是简单的使用只是'document.body'来指代'body'元素。 –

@ JukkaK.Korpela：谢谢！更新。 –

没有与代码中的几个问题，部分困难追踪，但您可以通过使用De开始调试veloper工具在您的浏览器中。您通常通过按F12键输入它们。这些工具的“控制台”窗格将显示JavaScript错误和其他诊断信息。

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

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

其余的bug比较棘手，会导致浏览器中的诊断有所变化，例如Firefox中的“TypeError：size不是函数”。原因在于调用size()位于<input>标记中的事件处理函数内部，并且其中隐含的上下文是元素节点<input>。该节点具有size属性，该属性反映为HTML标记属性size。即使标记没有明确的属性，也会定义该属性;那么它默认为依赖于浏览器的值，通常为20.无论如何，在这种情况下，标识符size表示该属性具有数值而不是函数。

有两个简单的方法来解决这个错误。您可以将调用size()更改为window.size()，从而引用全局定义的标识size（它是全局的，即window对象的属性，因为您在最上层定义了一个具有该名称的函数）。或者，您可以将函数名称更改为其他名称，只是避免任何可能属于元素节点的属性。例如，您可以使用Size，或使用changeBackgroundPosition。所以在HTML你可以有

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

，并在JavaScript

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

来源

2013-07-08 05:10:42

谢谢！现在效果很好。 – Matthew

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

回答

相关问题