js获取点击＜li＞标签里的内容值的两种方法

2022/3/22 6:27:55

编程Tag： js 点击标签 var console li log elementFromPoint

本文主要是介绍js获取点击＜li＞标签里的内容值的两种方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

第一种方法：使用elementFromPoint获取鼠标点击内容
第二种方法：使用this

例子如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div class = "pic">
	<div class="ul">
		<ul id= "ul1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>
</div>
</body>

<script>
function showValue(li){
	console.log(li);
    //第一种方法：使用elementFromPoint获取鼠标点击内容
	var obj=document.elementFromPoint(event.clientX,event.clientY);
	console.log("n:"  + obj.innerText);
    //第二种方法：使用this
	var obj1 = this.innerHTML;
	console.log("n:"  +obj1);
}

var li = document.querySelectorAll(".ul li");

for(var i = 0; i < li.length; i++){
	li[i].onclick = showValue;
}
</script>
</html>

打印结果：

这篇关于js获取点击＜li＞标签里的内容值的两种方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

js获取点击＜li＞标签里的内容值的两种方法

相关编程文章