logo标签列表

有没有一种方法可以冻结或锁定页面的DOM？

javascripthtmlcssdom
6
有没有办法冻结或锁定页面的DOM，以便不能再对其进行任何更改（如CSS或Javascript等）？
我在查找元素时经常遇到问题，当div或页面失去焦点时，元素会出现或消失。
我的正常方法是右键单击要检查的元素，但这样会使该元素从DOM中消失。
通过手动搜索DOM检查器，我可以找到该元素，但只要我在检查器中点击它，该元素就会从DOM中消失。
整个情况导致页面的某些交互部分完全无法访问。我无法找出应用于它们的CSS规则，也无法找到应该查看哪个CSS文件中的哪一行号或其他内容。我真的不想搜索多个CSS文件，查看每个规则并尝试弄清楚这是否是我正在寻找的规则。
你想只是检查元素吗？那就在 Chrome 中使用“分离到单独的窗口”功能。 - Gaurav Parashar
你能否打开开发者工具，使用小鼠标图标搜索可检查元素？这样你就不必再点击它们了。 - thepio
2
你尝试在DOM中元素的上下文菜单中使用“断点...”选项之一了吗？（在Chrome中）例如“断点节点移除”。 - sdgluck
您还可以在开发者控制台中使用:hover、:focus等设置元素状态的CSS。 - epascarello
1
@sdgluck，听起来很有用 - 你能把它作为答案并稍微扩展一下吗？谢谢！ - Jimmery
显示剩余2条评论
2个回答
6

您尝试过在Chrome开发者控制台中DOM元素的上下文菜单中使用断点...选项之一吗？

例如，节点删除时中断。这将作为特定DOM元素被删除的断点。

enter image description here

（点击图片以查看更大的尺寸）

很不幸，这似乎是在节点被删除后发生的。我选择了父节点没错吧？ - Jimmery
@Jimmery 在这之前应该先break... 可以看看这个例子。 - sdgluck
0

如果样式是在元素处于悬停/聚焦等状态时应用的，您可以在 Chrome 中强制元素状态。

  1. 检查您想要具有状态的元素。
  2. 单击样式面板中的 :hov 菜单选项。
  3. 单击所需状态的复选框。

Screenshot of Chrome Dev Tools

或者

  1. 在元素面板中右键单击元素标签
  2. 从上下文菜单中选择CSS状态

context menu

其他浏览器也有类似的选项。

2
正如我在评论中所述 - 这个元素被设置为 :after 元素，它是通过 Javascript 创建的（而不是因为 :hover 或 :active 等）- 所以这些对我都没有帮助... - Jimmery
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接