JavaScript改变div的背景颜色

最新推荐文章于 2022-02-15 02:26:47 发布

csdndc

最新推荐文章于 2022-02-15 02:26:47 发布

阅读量5.9k

点赞数

本文链接：https://blog.csdn.net/sndongcheng/article/details/73740529

版权

最简便的写法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务三</title>
    <script type="text/javascript">
    function bs(v) {
        kuang.style.backgroundColor=v;
}
    </script>
</head>

<body>
    <p>请选择颜色：</p>
    <select id="test" name="xuanzekuang" οnchange="bs(this.value)">
        <option value="red">红</option>
        <option value="green">绿</option>
        <option value="blue">蓝</option>
        <option value="black">黑</option>
    </select>
    <div id="kuang" style="width: 100px;height: 100px;border: 1px solid #eee">
    </div>
</body>
</html>

第二简便写法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务三</title>
    <script type="text/javascript">
    function bs() {
        var myselect = document.getElementById("test");
        var index = myselect.selectedIndex;
        var zhi = myselect.options[index].value;
        var kuang = document.getElementById("kuang");
        kuang.style.backgroundColor=zhi;
}
    </script>
</head>

<body>
    <p>请选择颜色：</p>
    <select id="test" name="xuanzekuang" οnchange="bs()">
        <option value="red">红</option>
        <option value="green">绿</option>
        <option value="blue">蓝</option>
        <option value="black">黑</option>
    </select>
    <div id="kuang" style="width: 100px;height: 100px;border: 1px solid #eee">
    </div>
</body>

</html>