js获取鼠标所在html元素的id和属性

js获取鼠标所在html元素的id和属性:

Code:
  1. <div onclick="Get_srcElement()">  
  2. <div id="001" style="border:1px solid red;width:100%;height:500px"> <span id="node001">这是第1结点div001<span>  
  3.   <div id="002" style="border:1px solid red;width:80%;height:300px"> <span id="node002">这是第2结点div002<span>  
  4.     <div id="003" style="border:1px solid red;width:50%;height:200px"> <span id="node003">这是第3结点div003<span>  
  5.     </div>  
  6.     <div id="004" style="border:1px solid red;width:50%;height:200px"> <span id="node003">这是第3结点div004<span>  
  7.     </div>  
  8.   </div>  
  9. </div>  
  10. <script>  
  11. function Get_srcElement()  
  12. {  
  13. var srcElement=""  
  14. srcElement= srcElement + " \n" +  "event.srcElement.id : " + event.srcElement.id  
  15. srcElement= srcElement + " \n" +  "event.srcElement.children[0].tagName: " + event.srcElement.children[0].tagName  
  16. srcElement= srcElement + " \n" +  "event.srcElement.firstChild.id : " + event.srcElement.firstChild.id  
  17. srcElement= srcElement + " \n" +  "event.srcElement.lastChild.id : " + event.srcElement.lastChild.id  
  18. alert(srcElement)  
  19. }  
  20.   
  21. </script>  
  22. </div>  
  23.   
  24.   
  25.   
  26.   
  27. <div id="div_001">  
  28.     <form id="form_001">  
  29.         <input type="button" id="button_001_id" name="button_001_Name" value="单击查看" class="button_001_Class" onclick="Get_srcElement2(this)">  
  30.     </form>  
  31. </div>  
  32. <script>  
  33. function Get_srcElement2()  
  34. {  
  35. var srcElement=""  
  36. srcElement= srcElement + " \n" +  "event.srcElement.id : " + event.srcElement.id  
  37. srcElement= srcElement + " \n" +  "event.srcElement.tagName : " + event.srcElement.tagName  
  38. srcElement= srcElement + " \n" +  "event.srcElement.type : " + event.srcElement.type  
  39. srcElement= srcElement + " \n" +  "event.srcElement.value : " + event.srcElement.value  
  40. srcElement= srcElement + " \n" +  "event.srcElement.name : " + event.srcElement.name  
  41. srcElement= srcElement + " \n" +  "event.srcElement.className : " + event.srcElement.className  
  42. srcElement= srcElement + " \n" +  "event.srcElement.parentElement.id : " + event.srcElement.parentElement.id  
  43. srcElement= srcElement + " \n" +  "event.srcElement.getattribute : " + event.srcElement.getAttribute  
  44. alert(srcElement)  
  45. }  
  46.   
  47. </script>  

目前不兼容火狐,参考下面代码进行修改看看可行否,我有时间再修改本篇日志。

function Get_srcElement(e)
{
ee=window.event||e;
 var tmpObj = ee.srcElement ||  ee.target;
var srcElement = srcElement + " " +  "event.srcElement.id : " + tmpObj .id
alert(srcElement)
}
 

好的,这个可以通过JavaScript监听鼠标移动事件,并获取鼠标所在位置的文字,然后根据文字显示对应的图片。以下是一个简单的实现示例: HTML代码: ```html <p>这是一段文字,鼠标碰到“文字”两个字会显示一张图片。</p> <div id="image-container"></div> ``` CSS代码: ```css #image-container { display: none; position: absolute; top: 0; left: 0; } ``` JavaScript代码: ```javascript var text = "文字"; // 需要匹配的文字 var imgSrc = "path/to/image.jpg"; // 图片路径 var imgWidth = 200; // 图片宽度 var imgHeight = 200; // 图片高度 var container = document.getElementById("image-container"); document.addEventListener("mousemove", function(event) { var target = event.target; if (target.nodeName === "P" && target.innerText.includes(text)) { container.innerHTML = "<img src='" + imgSrc + "' width='" + imgWidth + "' height='" + imgHeight + "'>"; container.style.display = "block"; container.style.top = event.clientY + "px"; container.style.left = event.clientX + "px"; } else { container.style.display = "none"; } }); ``` 解释一下代码: 首先定义了需要匹配的文字、图片路径、图片宽高等变量。然后获取到图片容器的DOM元素,并监听整个页面的mousemove事件。在事件回调函数中,先判断鼠标所在的目标元素是否是p标签,且该标签内包含需要匹配的文字。如果是,则将图片容器的innerHTML设置为img标签,并根据鼠标位置设置图片容器的位置,并将其display属性设置为“block”。如果不是,则将图片容器的display属性设置为“none”,以隐藏图片容器。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值