javascript change background color on click [closed]

后端未结

关注

 7  2155

失恋的感觉

相关标签:

7条回答

时光说笑

2020-12-03 13:23

You can use 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>

Using 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>

0 讨论(0)

悲&欢浪女

2020-12-03 13:25
You can set the background color of an object using CSS.

You can also use JavaScript to attach click handlers to objects and they can change the style of an object using element.style.property = 'value';. In the example below I've attached it in the HTML to a button but the handler could equally have been added to the body element or defined entirely in JavaScript.
```
body {
  background-color: blue;
}
```
```
<button onclick="document.body.style.backgroundColor = 'green';">Green</button>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

夕颜

2020-12-03 13:33

you can do this---

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

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

0 讨论(0)

情歌与酒

2020-12-03 13:35
I'm suggest that you learn about Jquery, most popular JS library. With jquery it's simple to acomplish what you want.Simle example below:
```
$(“#DIV_YOU_WANT_CHANGE”).click(function() {
    $(this).addClass(“.your_class_with_new_color”);
}); 
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

佛祖请我去吃肉

2020-12-03 13:41

Here you can find solutions for both your problems.

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/

0 讨论(0)

你的背包

2020-12-03 13:46

You can sets the body's background colour using document.body.style.backgroundColor = "red"; so this can be put into a function that's called when the user clicks. The next part can be done by using document.getElementByID("divID").style.backgroundColor = "red"; window.setTimeout("yourFunction()",10000); which calls yourFunction in 10 seconds to change the colour back.

0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页

热议问题