初识JavaScript01

最新推荐文章于 2025-07-29 18:18:43 发布

wcx909241523

最新推荐文章于 2025-07-29 18:18:43 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVAScript 文章标签： javascript 函数

本文链接：https://blog.youkuaiyun.com/wcx909241523/article/details/78177018

JAVAScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的网页示例，演示了如何使用HTML和JavaScript实现鼠标悬停时元素背景颜色的变化效果。当鼠标移入指定的div元素时，其背景会变为绿色并调整大小；当鼠标移出时，则恢复为原来的红色背景和大小。

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

这是一个鼠标移入是红色鼠标移出变绿色的例子

<head>
<title>Title</title>
<style>
#div1{
      width: 200px;
      height: 200px;
      background: red;}
</style>
<script>
function toGreen(){
            document.getElementById('div1').style.width="300px";
            document.getElementById('div1').style.height="300px"；
            document.getElementById('div1').style.background="green";
        }
function toRed(){
            document.getElementById('div1').style.width="200px";
            document.getElementById('div1').style.height="200px";
            document.getElementById('div1').style.background="red";
        }

</script>
</head>

<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>
</body>

下面是改进：通过使用变量

<script>
        function toGreen(){
            var oDiv= document.getElementById('div1');
            oDiv .style.width="300px";
            oDiv.style.height="300px";
            oDiv.style.background="green";
        }
        function toRed(){
            var oDiv= document.getElementById('div1');
            oDiv.style.width="200px";
            oDiv.style.height="200px";
            oDiv.style.background="red";
        }
    </script>