DOM基础3-4 编程练习

最新推荐文章于 2022-10-10 13:52:14 发布

请叫我二狗哥

最新推荐文章于 2022-10-10 13:52:14 发布

阅读量613

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 基础案例文章标签： DOM基础

cnblog博客：https://www.cnblogs.com/f6056/

本文链接：https://blog.youkuaiyun.com/weimob258616/article/details/90138436

Javascript 同时被 2 个专栏收录

57 篇文章

订阅专栏

基础案例

39 篇文章

订阅专栏

这篇博客介绍了如何使用DOM基础实现编程练习，包括在页面加载完成后，通过事件绑定使按钮在被点击时字体颜色变为红色，鼠标离开时字体颜色变为灰色。详细步骤包括设置onload事件、获取按钮元素、绑定点击和鼠标离开事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>