时间戳

首页 > 解决方案 > 如何根据我单击的按钮更改 div 的颜色？( javascript/css/html 只有没有库)

java - 如何根据我单击的按钮更改 div 的颜色？( javascript/css/html 只有没有库)

问题描述

我正在尝试创建一个 toast 通知。我有 3 个不同的按钮，我想根据单击的按钮更改吐司的颜色。注意：您在框中输入的文本是出现在 toast 中的文本。

现在它都以相同的颜色堆积起来。

这是代码（CSS不好，我只是在尝试）。

任何人都可以帮忙吗？非常感谢 ！

标签： javahtmlcsstoast

解决方案

您可以将“状态”参数传递给您的函数，并根据状态确定要使用的颜色，如下所示：

function toast(status){
    const inputVal = document.getElementById("myInput").value;

    const container = document.getElementById("toastcontainer");

    const toastdiv = document.createElement("div");

    const toastColor = (status == 'error' ? 'red' : (status == 'success' ? 'green' : (status == 'info' ? 'blue' : '')));

    toastdiv.style.backgroundColor = toastColor;

    toastdiv.innerHTML = inputVal;
    container.appendChild(toastdiv);
}

然后在您的 HTML 中传递它：

<button type="button" value="Error" onclick="toast('error')">Error</button>

<button type="button" value="Success"onclick="toast('success')">Success</button>

<button type="button" value="Info"onclick="toast('info')">info</button>

推荐阅读