原始代码
<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>