Question

我目前有一个网站，我在其中使用一些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失败了。

任何人都可以解释问题是什么以及我如何能够解决这个问题。

提前致谢克里斯

Answer 1

假设你在#mainscreen中有一些内容，最可能的解释是#mainscreen是浮动的，所以在计算它的父级高度时不会使用它，但是你有一个Doctype（或根本没有Doctype））它在Internet Explorer中触发Quirks模式，因此它不允许浮动通过其容器的底部落下。

添加触发标准模式的文档类型（因此IE将与其他浏览器更加一致）
在#outerscreen上设置overflow: hidden

Answer 2

这在FF4和Opera10中有效。您需要指定<div id="outerscreen">的高度和宽度，或者在其中有一些内容占用屏幕空间以使此效果可见。

Answer 3

虽然我不建议在您的布局中使用表格，但这是一个更好的解决方案并为您提供更多控制

<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中定义样式会更灵活，代码分离总是好的

Answer 4

我认为问题出在'

上

尝试：

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

Javascript DIV背景问题

4 个答案: