如何更改使用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的網站上的背景圖像位置？

回答

相關問題