日期:2014-05-17 浏览次数:20695 次
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScriptCSS5</title> <!-- 注意td 的伪类 --> <style type="text/css"> <!-- .begin { font-size: 14px; color: #0000FF; } .end { color: #FF00FF; font-size: 18px; text-decoration: underline; } td:hover { color: #FF00FF; background-color: #66FF00; cursor: se-resize; } --> </style> <script language="javascript" type="text/javascript"> function funOnload(){ var aTag = document.getElementsByTagName('a')[1]; aTag.onclick = funOnClick1;//添加事件 } function funOperate1(){//操作CSS 样式相关 var pTag = document.getElementsByTagName('p')[0]; //pTag.setAttribute("class","end"); //pTag.setAttribute("style","color: #FF00FF;font-size: 18px;text-decoration: underline;"); pTag.style.color="#0000FF"; } function funOnClick1(e){//通过DOM-2 操作事件(IE8不支持) var info = 'funOnClick1 '; if(null != e && e.type == "click"){ info +=" : \n 事件 " + e.type + "\n"; info += "按钮 " + e.button + "\n"; info += "触发元素 " + e.target.nodeName + "\n"; e.stopPropagation();//停止事件传播给父节点(在当前例子中事件就不会传达室给 table 的 funOnClick2) e.preventDefault();//阻止默认事件(这里点击 a 不会链接) } alert(info); } function funOnClick2(){ alert("funOnClick2"); } </script> </head> <body onload="funOnload();"> <table onclick="funOnClick2()"> <tr> <td><a href="javascript:funOperate1()">操作1</a></td> <td><a href="http://www.google.com">操作2</a> </td> </tr> </table> <p>Hello Word</p> </body> </html>?