谷歌浏览器 - Javascript DIV 背景问题

google chrome - Javascript DIV Background issue

本文关键字：背景 问题 DIV Javascript 谷歌浏览器      更新时间：2023-09-26

我目前有一个网站，我正在使用一些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的地方。

谁能阐明问题是什么以及我如何能够解决这个问题。

提前致谢克里斯

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

  1. 添加触发标准模式的 Doctype（因此 IE 将与其他浏览器更加一致）
  2. 将overflow: hidden设置为 #outerscreen

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

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

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

我认为问题出在"

尝试：

docEl.style.backgroundImage = "url(pics/intro.gif)";
相关文章：