如何根据我单击的按钮更改 div 的颜色? ( javascript/css/html 只有没有库)
Posted
技术标签:
【中文标题】如何根据我单击的按钮更改 div 的颜色? ( javascript/css/html 只有没有库)【英文标题】:How to change the color of the div depending on which button i click ? ( javascript/css/html ONLY no library) 【发布时间】:2020-05-16 16:58:37 【问题描述】:我正在尝试创建 toast 通知。我有 3 个不同的按钮,我想根据单击的按钮更改吐司的颜色。注意:您在框中输入的文字是toast中出现的文字。
现在所有的颜色都是一样的。
这是代码(CSS不好,我只是在尝试)。
有人可以帮忙吗?非常感谢!
【问题讨论】:
【参考方案1】:您可以将“状态”参数传递给您的函数,并根据状态确定要使用的颜色,如下所示:
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>
【讨论】:
【参考方案2】:这里很简单 \
document.getElementById( 'button1' ).addEventListener('click', function (event)
console.log('green')
color('green', 'color')
, false);
document.getElementById( 'button2' ).addEventListener('click', function (event)
console.log('gold')
color('gold', 'color')
, false);
document.getElementById( 'button3' ).addEventListener('click', function (event)
console.log('blue')
color('blue', 'color')
, false);
function color(color, id)
document.getElementById(id).style.backgroundColor=color;
#color
width:150px;
height:50px;
background-color:black;
<div id ='color'></div>
<button id ='button1'>Green</button>
<button id ='button2'>gold</button>
<button Id="button3">blue </button>
【讨论】:
以上是关于如何根据我单击的按钮更改 div 的颜色? ( javascript/css/html 只有没有库)的主要内容,如果未能解决你的问题,请参考以下文章