DOM基础3-19 编程练习

3-19 编程练习

小伙伴们，今天我们学习了鼠标事件，根据gif图，补充代码，实现下列功能：

（1）当鼠标在带滚动条的文本框上滑动时，字体颜色变成红色

（2）当鼠标移出带滚动条的文本框时，字体颜色变成绿色

（3）当鼠标移动文本框的滚动条时，空白的文本框出现文本“内容滚动了”

DOM基础3-19 编程练习

任务

第一步：通过id选取元素的方式获得这两个文本框

Tips：带滚动条的文本框和空白文本框

第二步：给带滚动条的文本框绑定事件

（1）绑定拖动滚动条时触发的事件，当滚动条被拖动时，空白文本框出现文本“内容滚动了”

（2）绑定鼠标移动时触发的事件，当鼠标在带滚动条的文本框上移动时，带滚动条的文本框字体颜色变为红色

（3）绑定鼠标离开时触发的事件，当鼠标在离开带滚动条的文本框时，带滚动条的文本框字体颜色变为绿色

参考答案：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>mouse</title>
    <style type="text/css">
        #div {
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 2px solid gray;
            margin-bottom: 20px;
        }

        #content {
            width: 200px;
            height: 100px;
            border: 2px solid gray;
        }
    </style>
</head>

<body>
    <div id="div">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod,tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo,consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse,cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non,proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.</p>
    </div>
    <div id="content"></div>
    <script type="text/javascript">
        //补充代码
        window.onload = function () {
            var scroll = document.getElementById("div");
            var content = document.getElementById("content");
            scroll.onscroll = function () {
                this.style.color = "red";
                content.innerHTML = "内容滚动了";
            }

            scroll.onmouseout = function () {
                this.style.color = "green";
            }

        }
    </script>
</body>

</html>