如何获取div背景图CSS值并在另一div中加载显示？

Hey Pierre, no worries about your English at all—let's figure this out together! 😊

从你的描述来看，代码放在页面末尾能生效但放在前面不行，再加上你怀疑reBg的字符串处理有问题，这里大概率是两个常见问题在共同影响：DOM加载顺序问题和背景图URL提取的正则匹配不严谨。

1. 先解决DOM加载顺序的问题 #

当你把JS代码放在页面头部时，浏览器还没渲染出目标div元素，这时候JS根本找不到要绑定点击事件的元素，自然无法生效。而放在页面末尾时，所有DOM元素已经加载完成，JS能正常获取到元素。

解决这个问题的核心是等待DOM完全加载后再执行JS代码，有两种常用方式：

方式一：使用DOMContentLoaded事件 #

把你的代码包裹在这个事件监听里，确保DOM渲染完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  // 你的所有JS代码都放在这里
});

方式二：给脚本添加defer属性 #

如果是外部JS文件，在script标签里加上defer，它会让浏览器在DOM加载完成后再执行脚本：

<script src="your-script.js" defer></script>

2. 修复reBg的字符串处理问题 #

背景图的background-image属性值有多种写法：url("image.jpg")、url('image.jpg')或者url(image.jpg)，如果你的正则只匹配其中一种，就会提取不到正确的URL。

推荐使用能兼容所有情况的正则：

const reBg = /url\(["']?(.*?)["']?\)/;

• url\(：匹配url(的固定开头
• ["']?：匹配可选的单引号或双引号（?表示该字符可选）
• (.*?)：非贪婪匹配URL的核心部分（避免匹配到多余的引号或括号）
• ["']?\)：匹配可选的引号和结尾的)

完整示例代码 #

下面是整合了两种修复方案的完整代码，你可以直接参考：

HTML结构 #

<!-- 带背景图的目标div -->
<div class="bg-card" style="background-image: url('nature-1.jpg'); width: 100px; height: 100px;"></div>
<div class="bg-card" style="background-image: url('nature-2.jpg'); width: 100px; height: 100px;"></div>

<!-- 用来显示背景图的div -->
<div id="preview-area" style="width: 300px; height: 300px; border: 1px solid #ccc;"></div>

JS代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带背景图的div和预览容器
  const bgCards = document.querySelectorAll('.bg-card');
  const previewArea = document.getElementById('preview-area');

  // 兼容所有背景图格式的正则
  const reBg = /url\(["']?(.*?)["']?\)/;

  // 给每个背景图div绑定点击事件
  bgCards.forEach(card => {
    card.addEventListener('click', function() {
      // 获取当前div的背景图样式
      const bgImageStyle = this.style.backgroundImage;
      // 提取URL
      const urlMatch = bgImageStyle.match(reBg);
      
      // 如果匹配到有效URL，就设置到预览容器
      if (urlMatch && urlMatch[1]) {
        previewArea.style.backgroundImage = `url(${urlMatch[1]})`;
        // 可以额外添加背景图的适配样式，比如铺满容器
        previewArea.style.backgroundSize = 'cover';
        previewArea.style.backgroundPosition = 'center';
      }
    });
  });
});

这样修改后，不管你的JS代码放在页面的哪个位置，都能正常工作，同时也能正确提取各种格式的背景图URL啦。

内容的提问来源于stack exchange，提问作者Pierre Debroux