js点击显示颜色

2020-03-13 14:37发布


点击其中的颜色显示相对应的背景颜色,比如我点击红色,div中背景是红色
<select name="">
<option value="" class="fff">未知色</option>
<option value="" class="red" onclick="show">红色</option>
<option value="" class="ls">绿色</option>
<option value="" class="hs">灰色</option>
</select>
<div id="a1"></div>

a1{

            width: 200px;
            height: 200px;
            border: 1px #ccc solid;
        }

标签:
1条回答
够拽才男人
2楼-- · 2020-03-13 15:15
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function() {
            $('[name="ColorSelector"]').on('change', function() {
                $('#a1').css('background-color', $(this).val());
            })
        })
    </script>
    <style type="text/css">
        #a1 {
            width: 200px;
            height: 200px;
            border: 1px #ccc solid;
        }
    </style>
</head>
<body>
    <select name="ColorSelector">
        <option value="fff">未知色</option>
        <option value="red" >红色</option>
        <option value="green">绿色</option>
        <option value="gray">灰色</option>
    </select>
    <div id="a1"></div>
</body>
</html>
查看更多
登录 后发表回答