首页 > 代码库 > 鼠标移动过去变大变绿

鼠标移动过去变大变绿

原始代码

 

<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" onm ouseover="document.getElementById(‘div1‘).style.height=‘300px‘;  document.getElementById(‘div1‘).style.width=‘300px‘;  document.getElementById(‘div1‘).style.background=‘green‘;"  onm ouseout="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" onm ouseover="toGreen()"  onm ouseout="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" onm ouseover="toGreen()"  onm ouseout="toRed()"></div>  </body></html>

 

鼠标移动过去变大变绿