Question

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

Answer 1

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

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>

如何在将光标放在它上面时获取HTML元素属性？

1 个答案: