JavaScript CSS和简单的事件

最新推荐文章于 2024-10-07 09:44:48 发布

原创最新推荐文章于 2024-10-07 09:44:48 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #CSS #XHTML #Google #HTML #ViewUI

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个结合JavaScript与CSS实现的网页交互案例，包括鼠标悬停效果、动态改变文本样式及事件处理等内容。演示了如何使用JavaScript操作DOM元素，并通过CSS美化页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>