javascript在单击时更改背景颜色

IT技术 javascript html css reactjs
2021-04-06 02:24:38

你能告诉我 Javascript 允许你将页面的背景颜色更改为另一种颜色吗?例如,我有一个蓝色的背景颜色,我想将其更改为绿色。当用户按下触发事件的按钮时,必须更改颜色。我看到它存在于许多站点上,但我无法编写我在 REACTJS 中编写的代码我很想得到您的帮助

谢谢...

6个回答

如果要更改按钮单击时的背景颜色,则应使用 JavaScript 函数并更改 HTML 页面中的样式。

function chBackcolor(color) {
   document.body.style.background = color;
}

它是 JavaScript 中用于更改颜色的函数,您将在事件中调用此函数,例如:

<input type="button" onclick="chBackcolor('red');">

我建议为此使用jQuery

如果你只想要几秒钟,你可以使用setTimeout函数:

window.setTimeout("chBackColor()",10000);

您可以使用 CSS 设置对象的背景颜色。

您还可以使用 JavaScript 将单击处理程序附加到对象,并且它们可以使用element.style.property = 'value';. 在下面的示例中,我在 HTML 中将它附加到一个按钮,但处理程序同样可以添加到 body 元素或完全在 JavaScript 中定义。

body {
  background-color: blue;
}
<button onclick="document.body.style.backgroundColor = 'green';">Green</button>

我建议你学习 Jquery,最流行的 JS 库。使用 jquery 很容易完成你想要的。下面的简单例子:

$(“#DIV_YOU_WANT_CHANGE”).click(function() {
    $(this).addClass(“.your_class_with_new_color”);
}); 

在这里,您可以找到解决这两个问题的方法。

document.body.style.height = '500px';
document.body.addEventListener('click', function(e){
    var self = this,
        old_bg = this.style.background;

    this.style.background = this.style.background=='green'? 'blue':'green';
    setTimeout(function(){
        self.style.background = old_bg;
    }, 1000);
})

http://jsfiddle.net/ea1xf3sx/

您可以使用设置主体的背景颜色,document.body.style.backgroundColor = "red";以便将其放入用户单击时调用的函数中。下一部分可以通过使用document.getElementByID("divID").style.backgroundColor = "red"; window.setTimeout("yourFunction()",10000);which 在 10 秒内调用 yourFunction 来改变颜色来完成。