DOM基础3-4 编程练习

请叫我二狗哥

墨衍会员 · AI 创作全网分发码龄8年

关注

原创最新推荐文章于 2024-04-17 21:20:38 发布 656 阅读 AI 写同款· GEO 优化 ›

限时加码！20+主流AI编程工具免费用购周边加赠Coding Plan Lite，Claude Code、Cursor等即刻畅享，学习进阶更高效！阅读详情

3-4 编程练习

小伙伴们，今天我们学习了onload事件，接下来补充下面的代码，实现以下功能：

（1）当点击按钮时，按钮的字体颜色变成红色

（2）当鼠标离开按钮时，字体颜色变成灰色

Tips：

脚本写在<head>标签中

任务

第一步：写出：在页面或图像加载完后才执行的事件语句，该语句后面跟上匿名函数

Tips：匿名函数中写入点击按钮执行的脚本，以下步骤均在该匿名函数中进行

第二步：通过元素获取dom对象的方式获取到按钮元素

第三步：按钮绑定点击事件，当点击按钮时，按钮的字体颜色变为红色

第四步：按钮再绑定鼠标离开事件，当鼠标离开按钮时，按钮的字体颜色变为灰色

Tips：this是该DOM对象的引用

参考答案：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>onload</title>
        <script type="text/javascript">
            //补充代码
            window.onload=function(){
                var btn=document.getElementsByTagName('input')[0];
                btn.onclick=function(){
                    btn.style.color="red";
                }
                btn.onmouseout=function(){
                    btn.style.color="gray";
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击改变按钮字体颜色" >
    </body>
</html>

收录于