JS小项目实践-鼠标移入移出改变元素样式

最新推荐文章于 2024-07-18 19:23:30 发布

原创最新推荐文章于 2024-07-18 19:23:30 发布 · 1.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

收录于

web 专栏收录该内容

9 篇文章

订阅专栏

本文通过实例讲解如何使用JavaScript实现鼠标移入移出时改变元素的样式，例如将小红方块转换为大绿方块。内容来源于B站的JS从入门到精通视频教程，强调函数的可重用性和代码效率提升。

鼠标移入移出改变元素样式

来源：B站JS从入门到精通视频

题目描述

通过函数实现鼠标移入移出改变元素样式，如从小红色方块变为大绿色方块

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
  #div1 {
    width: 100px;
    height: 100px;
    background:red;
      }
  </style>
  <script>
   window.onload
   function togreen() {
    var box=document.getElementById("div1");
    box.style.width="300px";
    box.style.height="300px";
    box.style.background="green";
   }
   function tored() {
    var box=document.getElementById("div1");
    box.style.width="100px";
    box.style.height="100px";
    box.style.backgroundColor= "red";
   }
  </script>
 </head>
 <body>
  <div id="div1" onmouseover="togreen()" onmouseout="tored()">
   </div>
 </body>
</html>