WEB开发网
开发学院网页设计JavaScript JavaScript CSS和简单的事件 阅读

JavaScript CSS和简单的事件

 2010-02-03 20:12:27 来源:WEB开发网   
核心提示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xm
<!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 > 
<table > 
  <tr> 
   <td><a href="javascript:funOperate1()">操作1</a></td> 
   <td><a href="qq'>http://QQface.cncms.com/">qq表情</a> </td> 
  </tr> 
</table> 
<p>Hello Word</p> 
</body> 
</html>

Tags:JavaScript CSS 简单

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接