javascript在单击时更改背景颜色[关闭]

Posted

技术标签:

【中文标题】javascript在单击时更改背景颜色[关闭]【英文标题】:javascript change background color on click [closed] 【发布时间】:2015-09-14 08:46:59 【问题描述】:

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

谢谢...

【问题讨论】:

你用的是js框架吗? 作为一个新用户,了解 SO 不是一个教程网站很重要。请查看***.com/help/on-topic 【参考方案1】:

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

【讨论】:

【参考方案2】:

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

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

【讨论】:

【参考方案3】:

如果你想改变按钮点击的背景颜色,你应该使用 JavaScript 函数并改变 html 页面的样式。

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

它是 JavaScript 中的一个改变颜色的函数,你会在你的事件中调用这个函数,例如:

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

我建议为此使用 jQuery

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

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

【讨论】:

【参考方案4】:

你可以这样做---

<input type="button" onClic="changebackColor">

function changebackColor()
document.body.style.backgroundColor = "black";
document.getElementByID("divID").style.backgroundColor = "black";      
window.setTimeout("yourFunction()",10000);

【讨论】:

getElementByID -> getElementById【参考方案5】:

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

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

body 
  background-color: blue;
&lt;button onclick="document.body.style.backgroundColor = 'green';"&gt;Green&lt;/button&gt;

【讨论】:

【参考方案6】:

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

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/

【讨论】:

【参考方案7】:

你可以使用setTimeout():

var addBg = function(e) 
  e = e || window.event;
  e.preventDefault();
  var el = e.target || e.srcElement;
  el.className = 'bg';
  setTimeout(function() 
    removeBg(el);
  , 10 * 1000); //<-- (in miliseconds)
;

var removeBg = function(el) 
  el.className = '';
;
div 
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;

.bg 
  background: orange;
<body onclick='addBg(event);'>This is body
  <br/>
  <div onclick='addBg(event);'>This is div
  </div>
</body>

使用 jQuery:

var addBg = function(e) 
  e.stopPropagation();
  var el = $(this);
  el.addClass('bg');
  setTimeout(function() 
    removeBg(el);
  , 10 * 1000); //<-- (in miliseconds)
;

var removeBg = function(el) 
  $(el).removeClass('bg');
;

$(function() 
  $('body, div').on('click', addBg);
);
div 
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;

.bg 
  background: orange;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<body>This is body
  <br/>
  <div>This is div</div>
</body>

【讨论】:

以上是关于javascript在单击时更改背景颜色[关闭]的主要内容,如果未能解决你的问题,请参考以下文章

单击按钮时更改按钮的背景颜色[重复]

单击android时更改TextView背景颜色

MVVM 在单击时更改网格的背景颜色

如何在单击时更改 HTML 表格单元格颜色

单击按钮时更改布局背景颜色

单击时更改 li 背景颜色