java - 如何在将光标置于其上时获取 HTML 元素属性？

Question

有什么方法可以获取我放置光标的元素的属性？我将使用 JavaFX 浏览器加载网站。所以我不能使用 Firebug 或任何插件。有没有可能实现这一目标？请帮忙。就像 Firebug 中的 Inspect Element 一样。

Answer 1

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

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

然后简单的看元素。您还可以 Hook 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>