如何將光標放在HTML屬性上？

Question

有什么方法可以獲取將光標放在其上的元素的屬性？ 我將使用JavaFX瀏覽器加載網站。 所以我不能使用Firebug或任何插件。 是否有可能實現這一目標？ 請幫忙。 就像在Firebug中檢查元素一樣。

Answer 1

在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>