JavaScript如何修改alert弹窗中指定文本的颜色与字体样式

原生alert()是浏览器内置的系统级弹窗，不支持HTML解析，也不开放自定义样式权限，你写入的任何HTML标签都会被当作纯文本原样输出，根本不会渲染样式效果，这个特性在所有现代浏览器（包括Edge、Chrome、Firefox）中都一致，和浏览器版本没有关系。另外你之前写的标签本身也存在语法错误，不符合HTML/CSS的书写规范。

原生alert没有办法实现局部文本的加粗、改色需求，只能用自定义HTML模态弹窗替代原生alert，自由控制内容样式，参考实现代码如下：

<!-- 自定义弹窗结构 -->
<div id="alertModal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); min-width:240px; padding:20px; background:#fff; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:99999;">
  <div class="alert-content">Hi how are you my <span style="color:red; font-weight:bold;">friend</span></div>
  <div style="text-align:right; margin-top:16px;">
    <button id="alertConfirm" style="padding:4px 16px; cursor:pointer;">确定</button>
  </div>
</div>

<script>
// 弹窗显示/关闭逻辑
const modal = document.getElementById('alertModal')
document.getElementById('alertConfirm').addEventListener('click', () => {
  modal.style.display = 'none'
})
// 需要弹出提示时调用这个方法即可
function showAlert() {
  modal.style.display = 'block'
}

// 调用示例
showAlert()
</script>

• 如果项目中已经引入了Element UI、Ant Design、Bootstrap等前端UI库，直接使用库自带的Modal、Message提示组件即可，不需要手动写弹窗结构，样式调整会更便捷。
• 不要尝试使用各类魔改原生alert的hack技巧，这类方法大多依赖浏览器未公开的私有特性，兼容性极差，浏览器版本迭代后很容易直接失效。

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