学习JS的总结（一）

最新推荐文章于 2022-07-10 01:57:28 发布

依本多情

最新推荐文章于 2022-07-10 01:57:28 发布

阅读量402

点赞数

分类专栏：【JS】文章标签：函数对话框 javascript js

本文链接：https://blog.csdn.net/qq_36520235/article/details/79088789

版权

【JS】专栏收录该内容

5 篇文章 0 订阅

订阅专栏

学习JS的基础事件和函数总结

用了一个onClick的事件属性，功能就是你点击这个事件的时候回弹出来一个对话框，里面可以显示你想要显示的东西
用了一个onmouseover、onmouseout的事件属性一个当鼠标放上去的时候可以自己设置一些效果，
后者是当鼠标移出的时候显示一些自己设置的效果（可以把每一个事件所做出来的效果都封装成一个函数，然后在script标签中
自定义一个函数名直接放进去，然后把你定义的函数名用单引号赋值给相对应的事件）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>测试JS的第一个页面</title>
        <pre>
                <h1 align="center">总结 </h1>
                        </pre>

    </head>
    <!--这部分是CSS的-->
    <style>
        #div01{height: 100px; width: 100px; background-color:red}
    </style>
    <!--这部分是JS的-->
    <script>
        function MoveFrom(){
            document.getElementById('div01').style.width='300px';
            document.getElementById('div01').style.height='300px';
            document.getElementById('div01').style.backgroundColor='chartreuse';
        }
        function RemoveFrom(){
            document.getElementById('div01').style.weight='200px';
            document.getElementById('div01').style.height='200px';
            document.getElementById('div01').style.backgroundColor='aqua';
        }
    </script>
    <body>
    <h2>第一部分测试内容</h2>
    <input type="button" value="按钮" onclick="alert('这个是你可以自定义弹出来的内容')"/><br /><br /><br /><br />


    <h2>第二部分测试内容</h2>
        <div id="div01" 
            onmouseover="MoveFrom()"
            onmouseout="RemoveFrom()";

            <!--onmouseover="document.getElementById('div01').style.width='300px';
            document.getElementById('div01').style.height='300px';
            document.getElementById('div01').style.backgroundColor='chartreuse';"
            onmouseout="document.getElementById('div01').style.weight='200px';
            document.getElementById('div01').style.height='200px';
            document.getElementById('div01').style.backgroundColor='aqua'">-->
            这个是div中的一段文字
        </div>
    </body>
</html>

依本多情

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习JS的总结（一）

学习JS的基础事件和函数总结用了一个onClick的事件属性，功能就是你点击这个事件的时候回弹出来一个对话框，里面可以显示你想要显示的东西用了一个onmouseover、onmouseout的事件属性一个当鼠标放上去的时候可以自己设置一些效果，后者是当鼠标移出的时候显示一些自己设置的效果（可以把每一个事件所做出来的效果都封装成一个函数，
复制链接

扫一扫