直接修改 style.backgroundImage 为 "url(路径)" 即可动态更换背景图，需注意 CSS 的 url() 包裹语法、路径基准（HTML 所在目录）、预加载防闪烁及 Network 面板排查 404 或跨域问题。
按钮点击后 background-image 路径怎么动态换？
直接改 style.backgroundImage 就行，但必须注意路径格式——CSS 里的 url() 是必需的包裹语法，漏掉会失效。
常见错误是写成 element.style.backgroundImage = "img/2.jpg"，实际得写成 element.style.backgroundImage = "url(img/2.jpg)"。相对路径以 HTML 文件所在目录为基准，不是 JS 文件位置。
- 如果图片在
assets/images/下，路径写url(assets/images/bg2.jpg) - 用绝对路径更稳：
url(/images/bg2.jpg)（从站点根目录开始） - 避免空格或中文路径，否则部分浏览器解析失败
多个按钮对应不同背景图，怎么避免重复写 onclick？
给每个按钮加 data-bg 属性存路径，统一绑定事件，比每个按钮写 onclick="changeBg('xxx')" 更易维护。
document.querySelectorAll('.bg-btn').forEach(btn => {
btn.addEventListener('click', () => {
const path = btn.dataset.bg;
document.body.style.backgroundImage = `url(${path})`;
});
});
这样增删按钮只需改 HTML，不用碰 JS。注意 dataset.bg 会自动转为小写，data-bg-src 对应 btn.dataset.bgSrc。
立即学习“前端免费学习笔记（深入）”；
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
切换时背景图闪一下？怎么平滑过渡？
纯 JS 改 backgroundImage 是硬切，浏览器要重新加载图片，没缓存就会卡顿或闪烁。解决方法只有两个：
- 提前用 CSS 隐藏方式预加载：在页面底部加
<div style="display:none"><img src="img/1.jpg"><img src="img/2.jpg"></div> - 用 CSS
transition配合 opacity 模拟淡入（需额外 DOM 元素），JS 只控制 class 切换，不直接操作 background
别指望 backgroundImage 本身支持 transition —— 它不属于可过渡的 CSS 属性。
路径拼错、404 或跨域导致背景不显示，怎么快速定位？
打开浏览器开发者工具，切到 Network 标签页，点按钮后看有没有对应图片请求，状态码是不是 404 或 blocked by CORS。
检查三件事：
- 控制台是否报
GET http://.../xxx.jpg 404 (Not Found) - Elements 面板里元素的
style是否真写了background-image: url(...)，且括号和引号完整 - 如果用的是本地 file:// 协议，Chrome 会禁加载图片，必须起个本地服务（如
npx serve）
路径问题永远是最常见的原因，别跳过这步直接怀疑 JS 逻辑。
