用js生成一个 toast 提示框全部用js实现 包括css和html元素能把css部分也用JS生成吗

是的，可以使用JavaScript生成CSS样式。以下是一个使用纯JavaScript实现的toast提示框的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript Toast Example</title>
  <style id="toast-style"></style>
</head>
<body>
  <button onclick="showToast()">Show Toast</button>
  <script>
    function showToast() {
      // 创建提示框元素
      var toast = document.createElement("div");
      toast.innerText = "This is a toast message.";

      // 设置提示框样式
      var toastStyle = document.getElementById("toast-style");
      toastStyle.innerText = `
        #toast {
          position: fixed;
          bottom: 20px;
          left: 50%;
          transform: translateX(-50%);
          background-color: rgba(0, 0, 0, 0.8);
          color: #fff;
          padding: 16px;
          border-radius: 8px;
          z-index: 9999;
          animation: toastFadeIn 0.5s, toastFadeOut 0.5s 2.5s;
        }

        @keyframes toastFadeIn {
          from {
            opacity: 0;
            transform: translateY(100%);
          }
          to {
            opacity: 1;
            transform: translateY(0%);
          }
        }

        @keyframes toastFadeOut {
          from {
            opacity: 1;
            transform: translateY(0%);
          }
          to {
            opacity: 0;
            transform: translateY(100%);
          }
        }
      `;

      // 添加提示框到页面中
      toast.id = "toast";
      document.body.appendChild(toast);
    }
  </script>
</body>
</html>

在这个示例中，我们使用了一个div元素来表示toast提示框，并且使用JavaScript生成了其样式。我们将样式保存在一个带有id属性的style标签中，并在需要时通过innerText属性动态更新样式内容。当用户点击“Show Toast”按钮时，我们通过调用showToast函数来创建并显示提示框。提示框的动画效果是通过使用CSS动画实现的。

用js生成一个 toast 提示框全部用js实现 包括css和html元素能把css部分也用JS生成吗

用js生成一个 toast 提示框全部用js实现包括css和html元素能把css部分也用JS生成吗