如何在将光标放置在HTML元素上时获得元素属性

How to get HTML element properties on placing the cursor over it?

本文关键字：元素 属性 光标 HTML      更新时间：2023-09-26

是否有任何方法可以获得我放置光标的元素的属性?我将使用JavaFX浏览器加载网站。所以我不能使用firebug或任何插件。这有可能实现吗?请帮助。它就像Firebug中的Inspect Element

在JavaScript中，当这种"选择元素"模式被激活时，您可以将mouseover处理程序附加到文档。当鼠标移动到元素上时，它将接收重复调用。您可以通过event对象上的target属性来判断鼠标位于哪个元素上，例如:

document.addEventListener("mouseover", function(e) {
    // Use e.target to know which element it is
}, false);

然后查看元素。你也可以让mouseout知道你什么时候离开一个元素。

这是有限制的。例如，您不能通过普通的DOM API获得附加到它的事件处理程序列表。

下面是一个演示处理程序的简单示例: 

var lastElement = null;
var display = document.getElementById("display");
document.addEventListener("mouseover", function(e) {
  if (e.target != lastElement) {
    lastElement = e.target;
    show("tag", lastElement.tagName);
    show("id", lastElement.id);
    show("name", lastElement.name);
    show("class", lastElement.className);
    show("style-color", lastElement.style.color);
    show("computed-color", getComputedStyle(lastElement).color);
  }
}, false);
document.addEventListener("mouseout", function(e) {
  var n, list;
  if (e.target == lastElement) {
    list = display.querySelector("span");
    for (n = 0; n < list.length; ++n) {
      list[n].innerHTML = "";
    }
    lastElement = null;
  }
}, false);
function show(type, text) {
  display.querySelector("." + type).innerHTML = text;
}
.foo {
  color: green;
}
<p id="main-paragraph">
  This is a test, with
  <strong class="foo">various elements</strong>
  that you can
  <em style="color: blue">mouse over</em>.
  <input type="text" name="the-input">
</p>
<div id="display">
  <div>tag: <span class="tag"></span></div>
  <div>id: <span class="id"></span></div>
  <div>name: <span class="name"></span></div>
  <div>class: <span class="class"></span></div>
  <div>style.color: <span class="style-color"></span></div>
  <div>computedStyle.color: <span class="computed-color"></span></div>
</div>

相关文章：