<html> <head> <meta charset="utf-8"> <title>javascript</title> <style> .id06{ width:50px; border:1px solid red; background:green; color:white; } </style> </head> <body> <script type="text/javascript"> //1写入 HTML 输出 和js写的位置有关 document.write("<h1 align='center'>1写入 HTML 输出</h1>"); </script> <table border="1" cellspacing="0" cellpadding="5px" width="400px" align="center"> <tr><td align="center">2对事件作出反应</td><td align="center"><input type="button" onclick="alert('对事件作出反应')" value="button"/></td></tr> <script language="javascript"> function demo(){ var id2=document.getElementById("de01"); //var id2=document.getElementsByName("de01")[0]; //注释的为实现？？？ //var id2=document.all["de01"]; //alert(111+"###"+id2); id2.innerHTML="Hello World!"; } </script> <tr><td align="center">3改变 HTML 内容(插入內容)innerHTML</td><td align="center"><input type="button" onclick="demo()" value="button"/><p id="de01" name="de01">111</p></td></tr> <script language="javascript"> function demo02(){ var id2=document.getElementById("de02"); if(id2.src.match("police")){ id2.src="copy_rignt_24.png"; id2.alt="版权"; }else{ id2.src="icon-police"; id2.alt="警徽"; } } </script> <tr><td align="center">4改变 HTML 图像*</td><td align="center"><img src="icon-police.png" id="de02" onclick="demo02()"/></td></tr> <script language="javascript"> function demo03(){ var id2=document.getElementById("de03"); if(id2.style.color=="red"){ id2.style.color="blue"; }else{ id2.style.color="red"; } } </script> <tr><td align="center">5改变 HTML 样式</td><td align="center"><input type="button" onclick="demo03()" value="button"/><p id="de03" name="de03">改变 HTML 样式</p></td></tr> <script language="javascript"> function demo04(){ var id2=document.getElementById("de04").value; if(id2==""||isNaN(id2)){ alert("不是数字！！！"); } } </script> <tr><td align="center">6验证用户的输入</td><td align="center"><input type="text" onblur="demo04()" id="de04"/></td></tr> <script> function myFunction(){ document.write("糟糕！文档消失了。"); } </script> <tr><td align="center" style="color:red">7警告,请使用 document.write() 仅仅向文档输出写内容。<br/>如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：</td> <td align="center"><button onclick="myFunction()">点击这里</button></td></tr> <script language="javascript"> function demo05(){ var id2=document.getElementById("id05"); alert(id2.outerHTML); } </script> <tr id="id05"><td align="center" style="color:red">8弹出页面内容及元素（outerHTML）</td><td align="center"><button onclick="demo05()">button</button></td></tr> <script language="javascript"> function demo06(){ var id2=document.getElementById("id06"); id2.className="id06"; } </script> <tr><td align="center" style="color:red">9通过js实现改变css样式（className）</td><td align="center"><button onclick="demo06()">button</button><p id="id06">JS-CSS样式</p></td></tr> <tr><td align="center"></td><td align="center"></td></tr> <tr><td align="center"></td><td align="center"></td></tr> <tr><td align="center"></td><td align="center"></td></tr> </table> <!-- <tr><td align="center"></td><td align="center"></td></tr> <tr><td align="center"></td><td align="center"></td></tr> <tr><td align="center"></td><td align="center"></td></tr> <tr><td align="center">JS测试</td><td align="center"><input type="text" placeholder="xxx" onfocus="fun(this)" value="JS测试!!!" size="12px"/></td></tr> <tr><td align="center">测试当前脚本信息</td><td align="center"><input type="button" onclick="GetScriptEngineInfo()" value="测试当前脚本信息"/></td></tr> <script type="text/javascript"> function fun(obj){ alert(111+"---"+obj.value+"---"+obj.type+"---"+obj.rows); } </script> --> </body> </html>