有没有办法在javascript中获取鼠标悬停时的当前项目ID？
我在 javascript 中有一个方法，我试图在鼠标悬停时获取元素的 id，有没有办法做到这一点？
假设我有一个不带参数的方法
function noArgs() {}
，并且有两个段落，id 分别为 p1 和 p2，我怎样才能获得悬停段落的 id？
编辑：这就是我目前获取 id 的方式，我想消除方法中的“element”参数
<!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=utf-8" />
<title>Test</title>
<script type="text/javascript" href="js/jquery.js"></script>
<script type="text/javascript">
function hoverButton(element) {
var button = document.getElementById(element);
switch (button.state) {
case "up":
button.style.backgroundPosition = "top";
button.state = "down";
break;
default:
button.style.backgroundPosition = "bottom";
button.state = "up";
break;
}
}
</script>
<style type="text/css">
.button {
background-image: url("images/button.png");
width: 100px;
height 50px;
background-position: top;
border: none;
font-size: 18px;
}
</style>
</head>
<body>
<input type="submit" id="submit_button" class="button" value="Submit" state="up" onmouseover="hoverButton('submit_button')" onmouseout="hoverButton('submit_button')"/>
<input type="submit" id="submit_button2" class="button" value="Submit" state="up" onmouseover="hoverButton('submit_button2')" onmouseout="hoverButton('submit_button2')"/>
</body>
</html>
I have a method in javascript and i'm trying to grab the id of an element on mouse over, is there a way to do this?
So say I have a method which takes no arguments
function noArgs() {}
and I have two paragraphs with the id of p1 and p2, how could I get the id of the hovered paragraph?
EDIT: This is currently how I'm grabbing the id's, which I want to eliminate the "element" argument in the method
<!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=utf-8" />
<title>Test</title>
<script type="text/javascript" href="js/jquery.js"></script>
<script type="text/javascript">
function hoverButton(element) {
var button = document.getElementById(element);
switch (button.state) {
case "up":
button.style.backgroundPosition = "top";
button.state = "down";
break;
default:
button.style.backgroundPosition = "bottom";
button.state = "up";
break;
}
}
</script>
<style type="text/css">
.button {
background-image: url("images/button.png");
width: 100px;
height 50px;
background-position: top;
border: none;
font-size: 18px;
}
</style>
</head>
<body>
<input type="submit" id="submit_button" class="button" value="Submit" state="up" onmouseover="hoverButton('submit_button')" onmouseout="hoverButton('submit_button')"/>
<input type="submit" id="submit_button2" class="button" value="Submit" state="up" onmouseover="hoverButton('submit_button2')" onmouseout="hoverButton('submit_button2')"/>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
使用 jQuery：
using jQuery:
为什么要消除元素参数？
在您的场景中，您可以执行
onmouseover="hoverButton(this)"并省去函数中的var button = document.getElementById(element);行。element将是当时鼠标悬停在哪个元素上，您可以通过执行element.id获取其 ID（如果需要的话）。但是，由于您在代码中引用了 jQuery，因此您不妨使用它；）
Why do you want to eliminate the element argument?
In your scenario, you could do
onmouseover="hoverButton(this)"and dispense with thevar button = document.getElementById(element);line from your function.elementwould then be whichever element was being moused-over at the time, and you could get its ID (should you want it) by doingelement.id.However, as you've got a reference to jQuery in your code, you might as well use it ;)