源代码和“检查元素”之间的区别答案

【问题标题】：Difference between source code and "inspect element"源代码和“检查元素”之间的区别
【发布时间】：2013-09-23 19:33:14
【问题描述】：

我在我的代码中找不到特定的样式元素，我可以使用 Chrome 和 Firefox (firebug) 中的代码编辑器对其进行编辑。这让我想到了我的问题，为什么视图源与实际代码如此不同？我知道 JQuery 和 Javascript 正在对它做一些事情（添加类和垃圾......）因为我正在使用 JQuery UI 中的模式，但为什么我找不到样式元素？？？他们在哪里？？？

源代码：

<div id="modalEmail-ESI" title="Email - ESI" class="infoModal">

来自代码编辑器：

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-modalEmail-ESI" style="display: block; z-index: 1004; outline: 0px; position: absolute; height: auto; width: 800px; top: 205px; left: 577px;"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-modalEmail-ESI">Email - ESI</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div id="modalEmail-ESI" class="infoModal ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 282px;" scrolltop="0" scrollleft="0">

在“检查元素”代码中，有一个样式属性width:800px; 我想更改，但我在代码中搜索过它显然不存在。

那个样式属性是动态生成的吗？

更新：根据您的反馈，当样式属性为动态时，如何更新电子邮件模式的宽度？

【问题讨论】：

您不是在查看源代码，而是在查看显示 DOM 动态状态的 DOM 检查器（包括所有被 jQuery 修改或移动的内容）。查看实际的视图源代码（Chrome 和 FF 中的 ctl-U），您会看到原始源代码。
当您选择“查看源代码”时，您只能看到文档，而不是当前页面。如果要更改元素，请确保在选择任何内容之前先加载页面。
“查看源代码”通常显示在 javascript 修改之前从服务器接收到的内容。开发人员工具/Firebug 将显示当时的样子（包括 javascript 修改）。然后是服务器上的实际内容 - 与“实际代码”块中的内容相同吗？
@MichaelBerkowski 那么样式属性是动态的吗？
@Keven 是的，jQuery UI 添加了它。您正在混淆查看源代码和检查元素。 View Source 是一个真实的东西，与检查元素有很大的不同。

标签： javascript jquery html css

【解决方案1】：

当您说“查看源代码”时，我假设您是在谈论编辑器，而不是实际的“查看源代码”。当您从浏览器“查看源代码”时，您会得到服务器提供的 HTML，而不是在 javascript 完成它之后。

当您在开发工具的编辑器中时，您正在查看当前存在的 DOM，其中包括内联样式、解析更正以及其他由 javascript 运行产生的结果。

【讨论】：

好的，看起来样式是动态的？那么我应该如何永久更改动态内容呢？
我不知道它会有多持久，但是您可以修改内联样式或将类添加到您的原始源代码，或者使用您自己的 javascript，但您认为合适。 jQueryUI 对你的元素做了很多魔法，但除非它的风格与你的冲突，否则它不应该影响你的东西。如果 jQueryUI 或任何其他库做了你不喜欢的事情 - 假设它使按钮字体变粗并且你不喜欢那样 - 那么你需要弄清楚它在哪里做，然后修改他们的样式表（不推荐) 或用你自己的样式覆盖他们的样式，无论是内联的还是你自己的 CSS。

【解决方案2】：

“实际代码”和“查看源代码”应该没有区别，因为后者显示的是前者。

源将与 DOM 检查器中的视图不同，因为这将显示 DOM 之后的当前状态：

HTML 的浏览器错误恢复
HTML 的浏览器规范化
通过 JavaScript 操作 DOM

【讨论】：

好的，样式是动态的。如何永久更改宽度？

【解决方案3】：

我同意 Joe Enos 的观点，但可能还有其他原因。

您可能正在查看电子邮件的来源，例如：

您正在查看的对象是一封电子邮件，gmail 会自动编辑 div，同时添加更多的类或 ID，以确保其用户界面不会被黑客入侵或损坏。
您正在使用与我的其他 CSS 或 JS 文件的链接。这里：这是我的网站的站点布局，我将其用作代码。但是一旦执行会发生什么！几乎相反，这里：在检查元素中，您可以看到有很多类被添加到 HTML 中，这是我们从未做过的。那是从哪里来的？我不确定它的 JS 或 CSS @media 查询。但它来自那里，你可以看到我已经链接了许多 JS 和 CSS 文件。

切入正题！

你说的源代码与真实的有很大不同，你有点错了。因为当你使用一个函数来编写或删除类时，你实际上知道你在哪里调用该函数。例如：

function writeClass() {
 $('div').addClass('someword');
}

而且您将始终知道此类是在页面加载时添加到此元素的。

否则浏览器本身永远不会向 DOM 添加任何内容。

是的，您可以动态更改 css 属性。使用这个：

$('element').css('width', '800px');

这一行将使用您刚刚提供的那个元素覆盖该元素的任何其他 CSS 属性。或者换句话说，jQuery 重写了你从 Server 获得的 DOM 属性。

还有一件事：

您不能使用jQuery 来永久更改 CSS 文件的值，您必须为此使用一些服务器端语言。 jQuery 可以更改网页内容一次，当页面重新加载时它们会被移回。

希望我已经接近了重点！ :) 干杯，

【讨论】：

呵呵呵呵，我只是想成为下一个马克扎克伯格 :D，非常欢迎您这样做，感谢您将其标记为最佳答案 :) 我感谢您对我工作的热爱 :) ^ _^