鼠标移动过去变大变绿

Yimi 2021-09-18 原文

原始代码

<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>