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

【问题标题】：Checking style of div, that appears only while mouse button is pressed检查 div 的样式，仅在按下鼠标按钮时出现
【发布时间】：2017-11-21 13:04:12
【问题描述】：

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

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

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

EDIT：当 div 不可见时（没有按下鼠标按钮），它根本不在 DOM 中。

【问题讨论】：

@OriDrori 不幸的是，这个 div 根本不在 DOM 中
也许可以在这里看看伪类：Get started with viewing and changing CSS。尝试在您需要单击的按钮上强制进入“活动”状态。另一种可能的方法是打开浏览器窗口并在其旁边打开开发者控制台，并通过查看控制台中的“元素”选项卡来跟踪 HTML 代码中的任何更改。

标签： html css google-chrome-devtools draggable firefox-developer-tools

【解决方案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 事件。

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

希望这能达到你的目的。

【讨论】：