通过 JavaScript 中的函数设置 div 的背景图像

通过 JavaScript 函数更改 div 的背景，可以直接响应点击或其他事件。将元素的 backgroundImage 样式设为 CSS url(...) 值，并确保 div 有可见尺寸。若只需从少量预设图片中选择，可以通过切换 CSS 类，让 CSS 管理图片选项。img 元素用于在 div 中显示内容，不会设置 div 的背景。

div 背景图片的工作方式

CSS background-image 会绘制在元素内容后方。它不会将图片添加到文档的内容结构中，因此适合用作装饰，或放在文字后方的图像。div 仍需具有可见的宽度和高度、包含内容，或应用其他布局规则；否则可能没有区域显示背景。

CSS 属性名是 background-image，而 JavaScript 通过对应的样式属性 backgroundImage 访问它。可以为该属性赋予 url("/images/forest.jpg") 这样的字符串。请使用相对于页面可正确解析、且浏览器能够加载的 URL。如果图片仅用于装饰，使用背景图片可避免将其加入无障碍树；如果图片本身传达内容，则应使用带有恰当替代文本的 img。

在 JavaScript 函数中设置背景图片

将图片 URL 传给函数，再更新目标元素的内联样式。第一个示例是一个简短、可运行的 JavaScript 赋值演示：其中的样式对象代替元素的样式，用来展示函数接收的参数和生成的 CSS 值；它并未声称运行了浏览器 DOM。

运行此示例：

本节中的代码以及显示的标签或输出仍为英文。

function setBackgroundImage(element, imageUrl) {
  element.style.backgroundImage = `url("${imageUrl}")`;
}

const hero = { style: {} };
setBackgroundImage(hero, "/images/forest.jpg");
console.log(hero.style.backgroundImage);

url("/images/forest.jpg")

要实现真实的页面交互，可以使用包含 div 和按钮的标记。两个元素解析完成后，事件监听器会调用同一个函数。请将示例 URL 换成页面能够加载的图片。这里展示的是浏览器页面示例的源码，没有声称其运行结果。

<div id="hero" class="hero">Featured content</div>
<button id="change-background" type="button">Change background</button>

<style>
  .hero {
    min-height: 12rem;
    padding: 1rem;
    background-position: center;
    background-size: cover;
  }
</style>

<script>
  function setBackgroundImage(imageUrl) {
    const element = document.getElementById("hero");
    if (!element) return;
    element.style.backgroundImage = `url("${imageUrl}")`;
  }

  const button = document.getElementById("change-background");
  button.addEventListener("click", () => {
    setBackgroundImage("/images/forest.jpg");
  });
</script>

脚本放在标记之后，因此 JavaScript 查找 div 和按钮时，它们已经存在。CSS 为 div 设置了可见高度，并让背景缩放至覆盖整个区域。如果将脚本移到单独的文件中，请使用 defer 加载，或将脚本放在标记之后，确保元素已可用。对于不可信或任意来源的 URL，应按照应用程序的规则验证来源，再将其用于 CSS。

使用 CSS 类切换背景图片

如果用户需要在固定的一组背景图片中选择，可以在 CSS 中定义这些选项，再让 JavaScript 选择相应的类。例如，可以将 CSS 规则直接写成 .hero--forest { background-image: url("/images/forest.jpg"); } 和 .hero--ocean { background-image: url("/images/ocean.jpg"); }。为 div 添加一个设置尺寸和外观的基础类，然后使用 classList 在两个图片类之间切换。

基于类的函数可以先移除两个选项类，再添加所需的类：element.classList.remove("hero--forest", "hero--ocean"); element.classList.add(imageClass);。这样既能明确列出可用的图片名称，也能避免不断累积互相冲突的类。如果图片选项是预先设定的，且由 CSS 管理视觉样式，适合采用这种方式。如果 URL 是动态生成的，或来自应用数据，则可直接设置 backgroundImage。

为什么 img 元素不是背景图片

使用 document.createElement("img") 创建 img，为其设置 src，再将它附加到 div 中，得到的是 div 的子元素。它仍是页面布局中的内容；设置 display: none 只会将其隐藏，不会把它变成背景。若图片应作为可见且具有语义的内容，或需要直接处理图片元素本身，可以采用这种方式。若要在其他内容后方显示背景，请设置 backgroundImage 或应用 CSS 类。

选择并测试合适的方法

如果背景固定，单用 CSS 即可。URL 会动态变化时，可直接更新样式；若只有少数几种预设状态，则可使用 CSS 类。CSS 的 background-image 支持用逗号分隔的多个图层，最先列出的图层会绘制在最上方。如果图层组合固定，可将其保留在 CSS 中；如果组合会动态变化，则可在 JavaScript 中赋予完整的逗号分隔值。

排查图片无法显示的问题时，请确认 ID 查找结果是预期的元素，检查计算后的 background-image 值，直接打开图片 URL，并确认 div 有可见尺寸。浏览器的网络面板可以显示请求失败的情况。来自其他源的图片可能会被服务器策略阻止，或需要取得许可；使用外部 URL 并不代表拥有图片的使用权。若要预加载图片，可创建 Image 对象，并在切换背景之前设置其 src；预加载或许能减少延迟，但不能保证后续请求一定成功。这些是建议在自己的页面中进行的检查；本文未声称已执行这些检查。