1.
效果图: 点击文字选择颜色,就可以给div填充想要的颜色; 点击清空颜色就可以把红色清空掉
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 颜色填充div</title>
<script src="jquery-1.12.3.min.js"></script>
<style>
div{100px;height: 100px; border: 1px solid black; float: left; margin: 10px}
</style>
</head>
<body>
<span>red</span>
<span>yellow</span>
<span>green</span>
<span>black</span><br/>
<input type="button" value="清空红色"/><br>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var color = "";
$('span').click(function(){
color = $(this).html();
});
$('div').click(function(){
$(this).css('background',color);
});
//清空红色
$('input').click(function(){
$('div[style *="red"]').css('background','');//style 中含有red的div的css样式清空
});
</script>
</body>
</html>