javascript - 内联样式元素出现在开发人员窗口中，但在查看源代码时却没有

Question

我正在查看具有 captcha 的表单.所应用的 CSS 使它看起来很古怪。我正要诊断问题，我正在查看在我的 Google chrome 开发人员窗口中应用的样式。对于每个单独的规则，框的右上角都有浅灰色文本，说明代码的来源。我感兴趣的一条规则表明它来自 <style></style> ，我认为这是一个内联样式规则。单击源，它会将我带到 <style>。定义的元素，果然规则就在那里。这些规则在源文件中不存在，所以我很确定该元素是通过 javascript 附加的。当我点击 ctrl + u查看源代码，<style>元素不存在。

如何查看开发者窗口中存在的元素，而该元素不存在于 View 源代码中？

Answer 1

由 JavaScript 创建的元素在源代码中不可见，这是因为它们是动态创建的，当您使用“查看页面源代码”时，您无需执行 JavaScript 即可获得服务器返回的页面源代码。