jQuery 源代码和“检查元素”之间的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18967324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between source code and "inspect element"
提问by Keven
I can't find a specific style element in my code which I've been able to edit by using the code editor in both Chrome and Firefox (firebug). Which brings me to my question, why is the view source so different from the actual code? I know JQuery and Javascript are doing something to it (adding classes and junk...) because I'm using the modal from the JQuery UI, but why can't I find the style elements??? Where are they???
我在我的代码中找不到特定的样式元素，我可以使用 Chrome 和 Firefox (firebug) 中的代码编辑器对其进行编辑。这让我想到了我的问题，为什么视图源与实际代码如此不同？我知道 JQuery 和 Javascript 正在对它做一些事情（添加类和垃圾......），因为我使用的是 JQuery UI 中的模式，但是为什么我找不到样式元素？？？他们在哪里？？？
Source Code:
源代码：
<div id="modalEmail-ESI" title="Email - ESI" class="infoModal">
From Code Editor:
从代码编辑器：
<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">
In the "inspect element" code, there is a style attribute width:800px;that I want to change, but I've searched for it in the code and it's apparently non-existent.
在“检查元素”代码中，width:800px;我想更改一个样式属性，但是我在代码中搜索了它，它显然不存在。
Is that style attribute dynamically generated?
那个样式属性是动态生成的吗？
UPDATE:Based on your feedback, how can I update the width of the email modal when the style attribute is dynamic?
更新：根据您的反馈，当样式属性为动态时，如何更新电子邮件模态的宽度？
采纳答案by Afzaal Ahmad Zeeshan
I agree to Joe Enos, but there are some other things that might be the cause.
我同意 Joe Enos，但可能还有其他一些原因。
You might be viewing a Source of an email, for example:
The object that you are viewing is an email, that gmail is automatically editting the divs and at the same time adding few more classes or ids to make sure their User Interface doesn't get hacked or broken.
You are using some linkage to other CSS or JS files like mine. Here:
This is the site layout for my website, that I am using as the code. But what happens once it is executed! Is almost opposite, here: In the inspect element you can see that there is alot of class being added to the HTML, which we never did. Where did that came from? Its JS or CSS @media queries I am not sure on this one. But it came from there, you can see I have linked many JS and CSS files.
您可能正在查看电子邮件的来源，例如：
您正在查看的对象是一封电子邮件，gmail 会自动编辑 div，同时添加更多类或 ID，以确保其用户界面不会被黑客入侵或损坏。
您正在使用与我的其他 CSS 或 JS 文件的链接。此处：
这是我网站的站点布局，我将其用作代码。但是一旦执行会发生什么！几乎是相反的，在这里：在检查元素中，您可以看到有很多类被添加到 HTML 中，这是我们从未做过的。那是从哪里来的？它的 JS 或 CSS @media 查询我不确定。但它来自那里，你可以看到我链接了许多 JS 和 CSS 文件。
Coming to the point!
进入正题！
What you're saying that the Source Code is so much different from the real one, you're kinda wrong. Because when you use a function to write ot remove the class, you actually know where you are calling the function. For example this:
你所说的源代码与真实的有很大不同，你有点错了。因为当您使用函数编写或删除类时，您实际上知道在哪里调用该函数。例如这个：
function writeClass() {
$('div').addClass('someword');
}
And you will always know that this class was added to this element on page load.
并且您将始终知道该类是在页面加载时添加到该元素中的。
Other wise the browser itself never adds anything to the DOM.
否则浏览器本身永远不会向 DOM 添加任何内容。
And yes, you can change the css properties dynamically. Use this:
是的，您可以动态更改 css 属性。用这个：
$('element').css('width', '800px');
This line would override any other CSS property for that element with the one that you are just providing. Or in other words, the jQuery over writes the DOM properties that you get from Server.
这一行将使用您刚刚提供的属性覆盖该元素的任何其他 CSS 属性。或者换句话说，jQuery 覆盖了您从 Server 获得的 DOM 属性。
One more thing:
还有一件事：
You cannot use jQueryto permanently change the values of CSS file, you must use some Server side language for that. jQuery can change the web page content once, when the page reloads they are shifted back.
您不能用于jQuery永久更改 CSS 文件的值，您必须为此使用某种服务器端语言。jQuery 可以更改网页内容一次，当页面重新加载时，它们会移回。
Hope I am close to the point! :) Cheers,
希望我接近重点！:) 干杯，
回答by Joe Enos
When you say "view source", I'm assuming you're talking about the editor, not the actual "View Source". When you "view source" from the browser, you get the HTML as it was delivered by the server, not after javascript does its thing.
当您说“查看源代码”时，我假设您在谈论编辑器，而不是实际的“查看源代码”。当您从浏览器“查看源代码”时，您将获得服务器提供的 HTML，而不是在 javascript 执行其操作之后。
When you're in the editor in your dev tools, you're looking at the DOM as it exists at the moment, which includes inline styles, parsing corrections, and other things that are the result of javascript running.
当您在开发工具的编辑器中时，您正在查看当前存在的 DOM，其中包括内联样式、解析更正以及其他由 javascript 运行产生的结果。
回答by Quentin
There should be no difference between the "actual code" and "view source", since the latter shows you the former.
“实际代码”和“查看源代码”之间应该没有区别，因为后者显示的是前者。
The source will differ from the view in a DOM inspector because that will show the current state of the DOM after:
源将与 DOM 检查器中的视图不同，因为它会在以下操作后显示 DOM 的当前状态：
- Browser error recovery of HTML
- Browser normalisation of HTML
- Manipulation of the DOM via JavaScript
- HTML 的浏览器错误恢复
- HTML 的浏览器规范化
- 通过 JavaScript 操作 DOM
