怎么让js弹出来的字是红色的

要让JavaScript弹出来的字是红色的，可以使用自定义弹窗或修改弹窗样式来实现。 下面我们将详细介绍如何通过这两种方法来实现这一目标。

一、使用自定义弹窗

创建自定义弹窗
设置弹窗样式
插入弹窗内容
添加交互功能

创建自定义弹窗

为了实现自定义弹窗，首先需要在HTML文档中创建一个容器，用于显示弹窗内容。以下是一个基本的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Alert</title>
    <style>
        /* 弹窗样式 */
        .custom-alert {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            border: 1px solid black;
            padding: 20px;
            z-index: 1000;
        }
        .custom-alert .message {
            color: red;
        }
        .overlay {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
    </style>
</head>
<body>
    <div class="overlay"></div>
    <div class="custom-alert">
        <p class="message"></p>
        <button onclick="closeAlert()">Close</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

设置弹窗样式

在CSS部分，我们定义了两个主要的样式类：custom-alert和overlay。custom-alert用于设置弹窗的样式，而overlay用于设置背景遮罩。

插入弹窗内容

我们使用JavaScript来动态地插入弹窗内容。以下是一个简单的JavaScript函数，用于显示弹窗并设置消息内容：

function showAlert(message) {
    const alertBox = document.querySelector('.custom-alert');
    const overlay = document.querySelector('.overlay');
    const messageBox = document.querySelector('.custom-alert .message');
    messageBox.textContent = message;
    alertBox.style.display = 'block';
    overlay.style.display = 'block';
}
function closeAlert() {
    const alertBox = document.querySelector('.custom-alert');
    const overlay = document.querySelector('.overlay');
    alertBox.style.display = 'none';
    overlay.style.display = 'none';
}

添加交互功能

我们在弹窗中添加了一个关闭按钮，并将其与closeAlert函数绑定。这允许用户点击按钮关闭弹窗。

二、修改弹窗样式

如果您不想使用自定义弹窗，可以尝试修改浏览器默认弹窗的样式。但是，请注意，浏览器默认弹窗的样式通常不允许用户自定义。因此，以下方法可能会受到限制。

使用第三方库

SweetAlert
AlertifyJS

SweetAlert

SweetAlert是一个流行的JavaScript库，允许您创建美观的弹窗。以下是一个使用SweetAlert的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SweetAlert Example</title>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
    <button onclick="showCustomAlert()">Show Alert</button>
    <script>
        function showCustomAlert() {
            Swal.fire({
                title: 'Custom Alert',
                html: '<span style="color: red;">This is a custom alert message!</span>',
                icon: 'info',
                confirmButtonText: 'Close'
            });
        }
    </script>
</body>
</html>

AlertifyJS

AlertifyJS是另一个流行的库，提供了类似的功能。以下是一个使用AlertifyJS的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AlertifyJS Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>
</head>
<body>
    <button onclick="showCustomAlert()">Show Alert</button>
    <script>
        function showCustomAlert() {
            alertify.alert('Custom Alert', '<span style="color: red;">This is a custom alert message!</span>', function(){
                alertify.message('OK');
            });
        }
    </script>
</body>
</html>

总结

通过使用自定义弹窗和第三方库，您可以轻松实现JavaScript弹窗文字变红的效果。自定义弹窗允许您完全控制弹窗的外观和行为，而第三方库则提供了现成的解决方案，简化了实现过程。无论您选择哪种方法，都能达到预期的效果。