原生 alert() 无法修改颜色，因其由浏览器或操作系统底层绘制，不暴露 DOM 节点、不支持 CSS 注入；必须用自定义对话框替代，如 div + fixed 定位模拟，并注意可访问性与交互细节。
原生 alert() 无法换颜色，任何尝试修改它的样式都是无效的。 浏览器强制渲染标准弹窗，不暴露 DOM 节点、不支持 CSS 注入、也不接受参数控制外观。所谓“改 alert 颜色”，实际只能用自定义对话框替代。
为什么直接改 alert() 的样式会失败
常见错误包括：document.querySelector('alert') 查不到节点、alert().style.color = 'red' 报错、或在控制台强行注入 style 标签但无效果。这是因为：
-
alert()是同步阻塞式 API，调用后 JS 执行暂停，DOM 完全冻结 - 弹窗由操作系统或浏览器 UI 层绘制，不在当前页面 DOM 树中
- 没有对应 HTML 元素，
getComputedStyle或querySelector均无法访问
用 div + position: fixed 模拟警告框
这是最轻量、兼容性最好、无需第三方库的方案。关键点是：遮罩层必须有 z-index，内容区需脱离文档流并居中。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
<div id="custom-alert" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999;">
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:white; padding:20px; border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,0.15);">
<p id="alert-message" style="color:#d32f2f; font-weight:bold;"></p>
<button onclick="closeAlert()" style="margin-top:12px; background:#d32f2f; color:white; border:none; padding:8px 16px; border-radius:4px;">确定</button>
</div>
</div>
- 背景色通过外层
div的background控制（如rgba(0,0,0,0.5)） - 文字颜色由
#alert-message的color决定，可随时用 JS 改写 - 按钮背景、边框、圆角等全部用内联
style显式声明，避免继承干扰
用 classList 切换主题色更可控
如果需要多套配色（比如红/黄/蓝警告），别硬编码 style，改用 class 管理：
立即学习“前端免费学习笔记（深入）”；
.alert-theme-error { background-color: #ffebee; border-left: 4px solid #f44336; }
.alert-theme-warning { background-color: #fff3cd; border-left: 4px solid #ffc107; }
.alert-theme-info { background-color: #d1ecf1; border-left: 4px solid #17a2b8; }
- JS 中只需
el.classList.remove('alert-theme-*'); el.classList.add('alert-theme-warning'); - 避免字符串拼接 style，减少 XSS 风险和维护成本
- 配合 CSS 变量可进一步解耦颜色值，例如
background-color: var(--alert-bg-warn);
真正要注意的是：自定义弹窗必须手动处理焦点、键盘关闭（ESC）、屏幕阅读器标签（aria-live）、以及移动端点击穿透问题。这些不是“锦上添花”，而是影响可用性的硬性条件——尤其当它替代了用户习以为常的 alert() 时。
