鼠标移动过去变大变绿

原始代码

<html>
  <head>
  <meta charset="utf-8">
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>鼠标移动过去放大变色</title>
    <style>
    #div1 {width:200px;
    height:200px;
    background:red;}
    </style>
  </head>
  <body>
  <div id="div1" onmouseover="document.getElementById('div1').style.height='300px';
  document.getElementById('div1').style.width='300px';
  document.getElementById('div1').style.background='green';"
  onmouseout="document.getElementById('div1').style.height='200px';
  document.getElementById('div1').style.width='200px';
  document.getElementById('div1').style.background='red';"></div>
  </body>
</html>

函数

<html>
  <head>
  <meta charset="utf-8">
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>鼠标移动过去放大变色</title>
    <style>
    #div1 {width:200px;
    height:200px;
    background:red;}
    </style>
    <script>
    function toGreen()
    {document.getElementById('div1').style.height='300px';
     document.getElementById('div1').style.width='300px';
     document.getElementById('div1').style.background='green';
    }
    function toRed()
    {
     document.getElementById('div1').style.height='200px';
     document.getElementById('div1').style.width='200px';
     document.getElementById('div1').style.background='red';
    }
    </script>
  </head>
  <body>
  <div id="div1" onmouseover="toGreen()"
  onmouseout="toRed()"></div>
  </body>
</html>

变量名称

<html>
  <head>
  <meta charset="utf-8">
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>鼠标移动过去放大变色</title>
    <style>
    #div1 {width:200px;
    height:200px;
    background:red;}
    </style>
    <script>
    function toGreen()
    {
    var oDiv=document.getElementById('div1');
    oDiv.style.height='300px';
    oDiv.style.width='300px';
    oDiv.style.background='green';
    }
    function toRed()
    {
    var oDiv=document.getElementById('div1');
    oDiv.style.height='200px';
    oDiv.style.width='200px';
    oDiv.style.background='red';
    }
    </script>
  </head>
  <body>
  <div id="div1" onmouseover="toGreen()"
  onmouseout="toRed()"></div>
  </body>
</html>

相关阅读:
Java技术学习笔记：C/S 与B/S 区别
Java开发面试题总结（八）
Java技术笔记：数据库的性能优化
零基础学习Python可以学会吗？你有哪些方法？
java培训学习路线图之SpringBoot多模块开发学习
计算机专业选Java和Python哪个前景好点？
bzoj2152 聪聪可可
bzoj1468 Tree
bzoj2879 [Noi2012]美食节
bzoj2208 [Jsoi2010]连通数

原文地址：https://www.cnblogs.com/Yimi/p/5923111.html