jq1 颜色填充器和清空指定颜色

效果图: 点击文字选择颜色,就可以给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>

jq1 颜色填充器 和清空指定颜色

jq1 颜色填充器和清空指定颜色