交作业交作业交作业

来源：1-19 自由编程

mixiaofan

2019-11-20 17:10:08

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {

            float: left;
            width: 50px;
            line-height: 30px;
            background-color: lightgray;
            margin-left: 10px;
            text-align: center;
            vertical-align: middle;
        }

        .div2 {
            width: 300px;
            height: 300px;
            border: solid gray 1px;
            margin-top: 60px;
            color: red;
        }

        .blue {
            background-color: blue;
        }

        .green {
            background-color: green;
            font-weight: bold;
            font-style: italic;
        }
    </style>

</head>
<body onload="alert('欢迎来到设置颜色的页面')">
<h2>请选择背景颜色</h2>

<div>
    <div id="blue" class="div1">蓝色</div>
    <div id="green" class="div1">绿色</div>
</div>

<div class="div2" id="bg">
</div>

<div>输入颜色首字母：
    <input type="text" name="color">
</div>

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    $("div#blue").click(function () {
        $("div.div2").removeClass("green");
        $("div.div2").text("蓝色背景");
        $("div.div2").addClass("blue");
    })
    $("div#green").click(function () {
        $("div.div2").removeClass("blue");
        $("div.div2").text("绿色背景");
        $("div.div2").addClass("green");
    })
    $("input[name='color']").keypress(function (event) {
        if (event.keyCode == 66) {
            $("div.div2").removeClass("green");
            $("div.div2").text("").css("background-color", "blue")
        } else if (event.keyCode == 71) {
            $("div.div2").text("").css("background-color", "green")
        }
    });
</script>
</body>
</html>

有个问题，我记得不是很多的js语句都是写在开头的style下或者外部引入。这几次的怎么都写在最后，而且写在最后移到style下却发现不能使用，为什么

写回答

2回答