用js生成一个 toast 提示框全部用js实现 包括css和html元素能把css部分也用JS生成吗style 也要动态创建的

可以的，以下是一个用JS生成toast提示框的示例代码，包括HTML、CSS和JS部分：

HTML部分：

<div id="toast-container"></div>

CSS部分：

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.toast.show {
  opacity: 1;
}

JS部分：

function showToast(message, duration) {
  // 创建toast元素并添加样式
  var toast = document.createElement('div');
  toast.classList.add('toast');
  toast.innerText = message;
  
  // 将toast元素添加到页面中
  var toastContainer = document.getElementById('toast-container');
  toastContainer.appendChild(toast);
  
  // 显示toast，并在一定时间后隐藏
  setTimeout(function() {
    toast.classList.add('show');
    setTimeout(function() {
      toast.classList.remove('show');
      setTimeout(function() {
        toastContainer.removeChild(toast);
      }, 300);
    }, duration);
  }, 100);
}

// 示例用法
showToast('Hello, world!', 2000);