获取鼠标点击元素的id

最新推荐文章于 2025-03-19 00:11:28 发布

張猴子

最新推荐文章于 2025-03-19 00:11:28 发布

阅读量5.9k

点赞数 5

分类专栏： HTML&&CSS 文章标签： js html dom

本文链接：https://blog.csdn.net/qq_42532128/article/details/89178504

版权

HTML&&CSS 专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript来获取HTML中被点击元素的ID。通过示例代码，展示了当点击页面上的特定div时，如何改变该元素的颜色，并揭示了对应的HTML和JavaScript实现细节。

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

在以下三个代码中我们可以清除地看到container中哪个div被点击了
效果图：
在这里插入图片描述

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取某div内鼠标点击元素的id</title>
	<link rel="stylesheet" href="demo.css">
	<script src="demo.js"></script>
</head>
<body>
	<div id = "container" onClick="getId()">
		<table>
			
		    <tr>
				<td><div class="box" id="box1">1</div></td>
				<td><div class="box" id="box2">2</div></td>
			</tr>
			
			<tr>
				<td><div class="box" id="box3">3</div></td>
				<td><div class="box" id="box4">4</div></td>
			</tr>
		    
		    <tr>
				<td><div class="box" id="box5">5</div></td>
				<td><div class="box" id="box6">6</div></td>
			</tr>
			
		</table>
	<div id = "text"></div>	
	</div>
	
</body>
</html>

body,html{
	margin:0;
	padding: 0;
}

#container{
	width: 230px;
	height: 350px;
	background: #999;
	margin:100px;
}
		
.box{
	width: 50px;
	height: 50px;
	background: #666;
	margin:30px;
	text-align: center;
}

#text{
	margin-top:10px; 
	color: red;
}

function getId(evt){
	evt = evt || window.event;
	var obj = evt.target ||evt.srcElement ;
	document.getElementById("text").innerHTML = obj.id;
}

以下代码执行结果为将红色div变成黑色
上代码！！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
</head>
	<script>
	     function clickedId(evt){
	     var curid;
	     
	     if(evt){//非ie
           curid = evt.target.id;
         }
	     
	     else if(window.event){//ie
             curid = window.event.srcElement.id;
         }
	     
	     return curid;
			 console.log(curid);
         }
		
		function changeDiv(){
			var curdiv = document.getElementById(clickedId());
			curdiv.style.background = "black";
		}
		
	</script>
	<style>
		#box{
			width: 50px;
			height: 50px;
			background: red;
		}
	</style>
<body>
	<div id = "box" onClick="changeDiv()"></div>
</body>
</html>