可通过JavaScript动态替换HTML5元素背景图：一、直接设style.backgroundImage；二、切换预定义CSS类；三、修改CSSStyleSheet规则；四、用CSS变量；五、创建并替换DOM节点。
如果您希望在HTML5页面中动态替换某个元素的背景图片，可以通过JavaScript修改其CSS的background-image属性来实现。以下是几种不同的实现方法：
一、直接设置style.backgroundImage属性
该方法通过获取元素的style对象，直接赋值backgroundImage样式，适用于内联样式的即时更新，不依赖外部CSS规则。
1、使用document.getElementById()或querySelector()获取目标元素。
2、将元素的style.backgroundImage属性设置为url('新图片路径')格式的字符串。
立即学习“前端免费学习笔记（深入）”；
3、确保图片路径正确，相对路径以HTML文件为基准，绝对路径以域名根目录为基准。
二、切换预定义CSS类名
该方法预先在CSS中定义多个背景图片对应的类，再通过JavaScript切换元素的className或classList，避免字符串拼接URL，提升可维护性与安全性。
1、在
2、使用element.className = 'bg-pic-2' 或 element.classList.replace('bg-pic-1', 'bg-pic-2') 替换当前类名。
3、注意：若原元素有多个类名，建议使用classList操作（如add、remove、toggle、replace）而非直接覆盖className。
三、修改CSSStyleSheet规则
该方法通过JavaScript访问文档中的CSS规则列表，定位到指定选择器的background-image声明并修改其值，适用于全局样式复用且需统一控制背景图的场景。
1、遍历document.styleSheets，查找包含目标选择器的CSSRule（如CSSStyleRule）。
2、确认rule.selectorText匹配目标元素选择器（例如#header或.main-bg）。
3、调用rule.style.setProperty('background-image', "url('new.jpg')")更新样式。
4、注意：需确保脚本执行时CSS已加载完成，且浏览器支持CSSStyleSheet.insertRule等API；跨域样式表无法访问。
四、使用CSS自定义属性（CSS变量）
该方法将背景图片URL存入CSS变量（如--bg-url），再通过JavaScript修改:root或元素级的style.setProperty()更新变量值，从而驱动background-image变化。
1、在CSS中声明：.target { background-image: var(--bg-url); }，并在:root中设初始值：:root { --bg-url: url('default.jpg'); }。
2、执行document.documentElement.style.setProperty('--bg-url', "url('replaced.jpg')");
3、注意：该方式要求background-image必须使用var(--bg-url)引用，不可硬编码；兼容性需支持CSS Custom Properties（IE不支持）。
五、通过创建并替换DOM节点
该方法不修改样式，而是移除原元素并插入一个具有新背景图的新同类型元素，适用于背景图更换同时需重置其他状态（如动画、过渡）的场景。
1、使用getComputedStyle()保存原元素的关键计算样式（如宽高、定位等）。
2、创建新元素（如div），设置其class、style.backgroundImage及必要内联样式。
3、调用parentNode.replaceChild(newElement, oldElement)完成替换。
4、注意：此操作会丢失原元素绑定的事件监听器和数据属性，需手动迁移或使用事件委托。
