如何让Oxygen Builder自动切换昼夜背景图片？

原代码无法生效的核心原因是：你修改的是<img>标签的src属性，但Oxygen Builder中设置的背景图通常是通过CSS的background-image样式实现的，并非独立的<img>元素，所以直接操作src不会改变背景图。

解决方案步骤： #

1. 确认目标元素的选择器
   打开浏览器开发者工具（F12），右键点击需要切换背景的容器元素，选择「检查」，获取它的ID或类名。比如目标元素ID是feature_section，类名可能是oxy-background-container之类的，以实际页面元素为准。

2. 替换为针对CSS背景的代码
   下面是修改后的可运行代码，针对Oxygen的背景图逻辑调整：

   document.addEventListener('DOMContentLoaded', function() {
     // 获取当前时间小时数
     const hours = new Date().getHours();
     // 定义昼夜图片URL
     const sunsetImg = "url('http://at-cdn-s01.audiotool.com/2014/06/03/documents/85NwUJbwC0Gx0rbiKePSWWcKUqhmdP/0/cover256x256-46428e19514b49058125b21b8107c2eb.jpg')";
     const nightImg = "url('https://pbs.twimg.com/profile_images/2973095145/47f74748e0c6240db5e0b3034af6da16.jpeg')";
     // 替换为你实际获取的元素选择器
     const targetElem = document.getElementById('feature_section');
     // 如果用类名，替换为 document.querySelector('.your-class-name');
   
     // 切换背景图
     if (hours > 6 && hours < 20) {
       targetElem.style.backgroundImage = sunsetImg;
     } else {
       targetElem.style.backgroundImage = nightImg;
     }
   
     // 可选：添加背景图样式优化（和Oxygen设置保持一致）
     targetElem.style.backgroundSize = 'cover';
     targetElem.style.backgroundPosition = 'center center';
     targetElem.style.backgroundRepeat = 'no-repeat';
   
     // 可选：实时切换（用户停留在页面超过昼夜分界点时自动更新）
     setInterval(() => {
       const currentHour = new Date().getHours();
       const shouldBeSunset = currentHour > 6 && currentHour < 20;
       const currentBg = targetElem.style.backgroundImage;
       if ((shouldBeSunset && currentBg !== sunsetImg) || (!shouldBeSunset && currentBg !== nightImg)) {
         targetElem.style.backgroundImage = shouldBeSunset ? sunsetImg : nightImg;
       }
     }, 3600000); // 每小时检查一次
   });
   

3. 在Oxygen中添加代码
   进入Oxygen Builder页面编辑器，点击页面设置→自定义脚本→JavaScript，将上述代码粘贴进去，保存后预览页面即可生效。

常见问题排查： #

• 确保元素选择器正确：如果用ID，检查是否拼写错误；如果用类名，确保是唯一的目标元素。
• 检查图片URL是否可访问：直接在浏览器打开图片链接，确认能正常加载。
• 样式优先级问题：如果Oxygen的默认背景样式覆盖了代码设置，可以尝试在backgroundImage值后添加!important，比如：targetElem.style.backgroundImage = sunsetImg + ' !important';

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