Javascript DIV背景問題

我目前有一個網站，我在其中使用一些JavaScript來更改DIV的背景。Javascript DIV背景問題

的DIV定義如下：

<td style="width: 750px; height: 300px; background-color: Black; border: 0px;"> 
    <div id="outerscreen"> 
      <div id="mainscreen"> 
      </div> 
    </div> 
</td>

，我使用的JavaScript如下：

var docEl = document.getElementById('outerscreen'); 
      docEl.style.backgroundImage = "url('pics/intro.gif')";

我的問題就出現在那裏這個功能完美的作品在IE瀏覽器，但無法爲Chrome， FF和Safari。

任何人都可以闡明問題是什麼以及我可以如何解決這個問題。

在此先感謝克里斯

來源

2011-05-18 Swatchwatch

我懷疑'docEl =的document.getElementById（'在其他瀏覽器不支持查詢。您需要將IE標識爲唯一具有不同訪問方法的標識。Hooray – ppumkin 2011-05-18 08:12:21

@ppumkin每個瀏覽器都支持document.getElementById（） – Ibu 2011-05-18 08:13:22

爲什麼不能直接編寫'doc.getElementById（'outerscreen'）。 style.backgroundImage =' – 2011-05-18 08:14:32

假設你有內部#mainscreen一些內容，最有可能的解釋是，#mainscreen是浮動的，所以在計算高度時，它的父不使用它，但你有一個Doctype（或者根本沒有Doctype）觸發Internet Explorer中的Quirks模式，所以它不允許浮游物通過它們的容器底部。

添加觸發標準模式一個DOCTYPE（所以IE會與其他瀏覽器更加一致）
設置overflow: hidden上#outerscreen

來源

2011-05-18 08:19:55 Quentin

這確實在FF4和Opera10的工作。您需要指定<div id="outerscreen">的高度和寬度，或者讓其中的某些內容佔據屏幕空間，以便使該效果可見。

來源

2011-05-18 08:23:50 Raze

雖然我不建議使用爲您的網站佈局的表是工作得更好，給你更多的控制

<style type='text/css'> 
    .outerCell { 
    width: 750px; height: 300px; background-color: Black; border: 0px; 
    } 

    .outerScreen { 
     background-image : url('pics/intro.gif'); 
     height: 300px; 
    } 
</style> 

<td class='outerCell' > 
    <div id="outerscreen"> 
      <div id="mainscreen"> 
      </div> 
    </div> 
</td>

現在的JavaScript的解決方案：

var docEl = document.getElementById('outerscreen'); 
docEl.className = "outerScreen";

已經定義了你的風格在一個css中當你想進行更改時更加靈活，代碼分離總是不錯

來源

2011-05-18 08:26:53 Ibu

我覺得問題出在'

嘗試：

docEl.style.backgroundImage = "url(pics/intro.gif)";

來源

2011-05-18 08:26:58 ic3b3rg

'''在CSS中的urls周圍的字符只會導致在IE5 for Mac中出現問題。這似乎不太可能。 – Quentin 2011-05-18 08:41:32

Javascript DIV背景問題

回答

相關問題