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背景问题

回答

相关问题