•修改style.display，例子：切换层的显示
• function togglediv() {
• var div1 = document.getElementById('div1');
• if (div1.style.display == '') {
• div1.style.display = 'none';//不显示
• }
• else {
• div1.style.display = '';//显示
• }
• }
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title></title> 5 6 <script type="text/javascript"> 7 function hide(btn) { 8 var div = document.getElementById("d1"); 9 if (div.style.display == "none") { 10 div.style.display = ""; 11 btn.value = "隐藏"; 12 }else{ 13 div.style.display = "none"; 14 btn.value = "显示"; 15 } 16 } 17 function show() { 18 var div = document.getElementById("d1"); 19 div.style.display = ""; 20 } 21 22 function detailsShow(chk) { 23 var div = document.getElementById("d3"); 24 if (chk.checked) { 25 div.style.display = ""; 26 } else { 27 div.style.display = "none"; 28 } 29 } 30 31 function aOver() { 32 //screenX 鼠标在屏幕中坐标 33 var div = document.getElementById("d4"); 34 div.style.position = "absolute"; 35 div.style.top = window.event.clientY;//鼠标在浏览器中的位置 36 div.style.left = window.event.clientX; 37 div.style.display = ""; 38 39 } 40 function aOut() { 41 var div = document.getElementById("d4"); 42 div.style.display = "none"; 43 } 44 </script> 45 </head> 46 <body> 47 <div id="d1"> 48 怎么会迷上你，我在问自己。。。 49 </div> 50 <div id="d2"> 51 春天里百花香 52 </div> 53 <input type="button" value="隐藏" onclick="hide(this)" /> 54 <input type="button" value="显示" onclick="show()" /> 55 <hr /> 56 57 <input type="checkbox" onclick="detailsShow(this)" />显示详细信息 58 <div id="d3" style=" display:none"> 59 详细信息 60 </div> 61 62 <hr /> 63 64 <a href="http://www.baidu.com" onmouseover="aOver()" onmouseout="aOut()">百度</a> 65 <a href="http://www.google.com" onmouseover="aOver()" onmouseout="aOut()">google</a> 66 <a href="http://www.sougou.com" onmouseover="aOver()" onmouseout="aOut()">sougou</a> 67 68 <div id="d4" style=" display:none; border:dotted 1px red;"> 69 <img src="IMG_8910.jpg" width="200px" height="100px" /> 70 <br />我拍的照片 71 <br />赵苑 72 </div> 73 </body> 74 </html>
•案例：注册页面，点击“高级”CheckBox，则显示高级选项，否则隐藏
•案例：鼠标放到一个超链接的时候，在鼠标的位置显示一个黄色背景，带图片的悬浮提示，鼠标离开就消失。提示：鼠标进入控件的事件是onmouseover，离开的事件是onmouseout。
03-27