用JavaScript批量访问HTML元素

crystalis

于 2014-05-19 09:31:06 发布

阅读量531

点赞数

本文通过一个简单的HTML页面展示了如何使用CSS美化页面并利用JavaScript为页面上的元素添加交互功能，如鼠标悬停效果等。

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

<!DOCTYPE html>
<html>
<style type="text/css">
 .important { color:#F00; font-weight:bold;} 
</style>
<body>
<script>
function test(){
	var testUL = document.getElementById("testUL");
	var listItems = testUL.getElementsByTagName("LI");
	for (var i=0; i<listItems.length; i++) {
		listItems[i].onmouseover=function() {
			this.className = "important";
		}
		listItems[i].onmouseout=function() {
			this.className = "";
		}
	}
}
</script>   

<ul id="testUL">
  <li>HTML写内容</li>
  <li>CSS控制外观</li>
  <li>JavaScript控制行为</li>
</ul>
<button onclick="test(); return false;" value="批量访问元素">
	给所有的li元素添加鼠标事件</button>
</body>
</html>

单击之前