JavaScript 入門練習1：鼠標移入移出改變 div 大小

時間 2019-11-29

標籤 javascript 入門練習鼠標移入移出改變 div 大小欄目 JavaScript 简体版

原文原文鏈接

現有一個 div 盒子，寬度和高度都是200像素，背景顏色是灰色（#ccc），將鼠標移入盒子（懸停），盒子變成400×400像素，鼠標移出後盒子恢復原大小。圖示以下：html

使用的知識點：web

　　1.onmouseover 事件 app

　　 onmouseover 事件dom

　　2.dom 操做——查找節點：函數

　　 document.getElementById('id屬性值');spa

　　　dom 操做的做用：容許程序和腳本動態地訪問和更新文檔的內容、結構和樣式scala

　　3.window.onloadcode

　　 window.onload 是在 dom 樹加載完和全部文件（好比外鏈 CSS 樣式表等等）加載完以後執行一個函數。htm

代碼以下：blog

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 6 <meta name="apple-mobile-web-app-capable" content="yes">
 7 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 8 <title></title>
 9 <style>
10 div{ width:200px; height:200px; background:#ccc; }
11 </style>
12 
13 <script>
14 window.onload=function (){
15     var oDiv=document.getElementById('div1');
16     
17     oDiv.onmouseover=function (){
18         oDiv.style.width='400px';
19         oDiv.style.height='400px';
20     };
21     oDiv.onmouseout=function (){
22         oDiv.style.width='200px';
23         oDiv.style.height='200px';
24     };
25 };
26 </script>
27 </head>
28 
29 <body>
30     <div id="div1"></div>
31 </body>
32 </html>