如何在 JavaScript 中更改警告框的颜色?
front end technologyjavascriptweb development
在本教程中，我们将学习如何在 JavaScript 中更改警告框的颜色。此外，我们将学习设置整个警告框的样式，包括警告框的内容。
在 JavaScript 中，当用户在应用程序上执行某些操作时，警告框是向用户显示成功、失败或信息性消息的最佳方式。程序员可以使用 alert() 方法创建默认警告框，但不能更改 alert() 框的默认样式。
要更改警告框的样式，程序员需要创建自定义警告框并根据要求设置其样式。
使用 JavaScript 创建自定义警告框
要使用纯 JavaScript 创建自定义警告框，用户可以创建一个 div 元素并在其中添加警告框的内容。此外，他们还可以根据需要添加关闭按钮并设置其样式，并将其位置设置在警告框的右下角。此外，程序员还可以为警告框 div 设置自定义背景颜色。
当程序员想要弹出和隐藏警告框时，只需更改警告框的显示属性或样式即可。
语法
用户可以按照以下语法将自定义 div 转换为警告框。
<div id = "alert"> // content for alert div </div> // button to open alert div <button onclick = 'invokeAlert();'> Show Alert Box </button> <script> var alertDiv = document.getElementById("alert"); // function to show alert div function invokeAlert() { alertDiv.style.display = "block"; } // function to close alert div function closeDialog() { alertDiv.style.display = "none"; } </script>
方法
使用 div 元素创建自定义警告框。
设置 div 元素的背景颜色和文本消息的字体颜色。
使用示例中的 CSS 正确设置关闭按钮和整个警告框的样式。
示例
我们创建了两个函数来显示和隐藏警告框。当用户点击 显示警告框 按钮时，它将调用 invokeAlert() 函数，该函数将为警告框 div 设置"dispaly: block"。当用户点击警告框内的 关闭 按钮时，它将调用 closeDialog() 函数，该函数将为警告框 div 设置"display: none"以将其隐藏。
<html> <head> </script> <style> #alert { display: none; background-color: rgb(252, 219, 219); border: 1px solid green; position: fixed; height: 80px; width: 250px; left: 40%; top: 2%; padding: 6px 8px 8px; text-align: center; } p { font-size: 18px; color: green; } button { border-radius: 12px; height: 2rem; padding: 7px; cursor: pointer; border: 2px solid green; background-color: aqua; } #close { position: absolute; right: 20px; bottom: 10px; } </style> </head> <body> <h2>Change the color of alert box in Javascript.</h2> <h4>Creating custom alert box using <i> vanilla Javascript.</i></h4> <div id = "alert"> <p>Welcome to the tutorialsPoint!</p> <button id = "close" onclick = "closeDialog()"> Close</button> </div> <button onclick = 'invokeAlert();'>Show Alert Box</button> <script> var alertDiv = document.getElementById("alert"); function invokeAlert() { alertDiv.style.display = "block"; } function closeDialog() { alertDiv.style.display = "none"; } </script> </body> </html>
本教程将教用户使用纯 JavaScript 创建自定义警报框，并介绍用户如何更改警报 div 的颜色。此外，用户还可以使用 JQuery 库自定义警报框的颜色。
