检查 div 的样式，仅在按下鼠标按钮时出现

Question

在页面中，我有一个 div，它是在我按住鼠标按钮时用 JS 添加的，并在释放按钮时立即删除。 （它是 JQuery 可拖动的一部分）

是否可以在 Firefox 或 Chrome（或其他一些）开发人员工具中检查此 div 的样式？

加分，如果回答不建议修改代码

编辑：当div不可见时（未按下鼠标按钮），它根本不在DOM中。

Answer 1

是的， 你可以做一件事：让页面呈现在你想要检查的浏览器上，然后转到浏览器开发工具（检查元素）的控制台选项卡，然后执行 javascript 如下所示：

var targetNode = document.querySelector ("div");
if (targetNode) {
    /*--- Simulate a natural mouse-click sequence. Keep open any one line at a time based on the event you want to test. */
    triggerMouseEvent (targetNode, "mousedown");
    //triggerMouseEvent (targetNode, "mouseup");
}

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}

在上面给出的代码中，您可以一次注释和取消注释 IF 条件中的这两行，以触发 mousedown 事件或 mouseup 事件。

当您执行代码时，您可以在特定事件的浏览器中检查它的样式。

希望这对您有用。