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.
在“inspect element”代码中，有一个样式属性宽度：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?
更新：根据您的反馈，当样式属性是动态时，如何更新电子邮件模式的宽度？
3 个解决方案
#1
2
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.
您正在查看的对象是一封电子邮件，gmail会自动编辑div，同时添加更多类或ID以确保其用户界面不会被黑客攻击或破坏。
-
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. 您正在使用与我的其他CSS或JS文件的某些链接。这里：这是我网站的网站布局，我将其用作代码。但是一旦执行就会发生什么！几乎相反，这里：在inspect元素中你可以看到有很多类被添加到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 over写入从Server获得的DOM属性。
One more thing:
还有一件事：
You cannot use jQuery to 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,
希望我接近这一点！ :)干杯，
#2
18
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运行的其他结果。
#3
7
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
- 浏览器错误恢复HTML
- Browser normalisation of HTML
- 浏览器规范化HTML
- Manipulation of the DOM via JavaScript
- 通过JavaScript操作DOM
#1
2
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.
您正在查看的对象是一封电子邮件，gmail会自动编辑div，同时添加更多类或ID以确保其用户界面不会被黑客攻击或破坏。
-
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. 您正在使用与我的其他CSS或JS文件的某些链接。这里：这是我网站的网站布局，我将其用作代码。但是一旦执行就会发生什么！几乎相反，这里：在inspect元素中你可以看到有很多类被添加到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 over写入从Server获得的DOM属性。
One more thing:
还有一件事：
You cannot use jQuery to 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,
希望我接近这一点！ :)干杯，
#2
18
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运行的其他结果。
#3
7
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
- 浏览器错误恢复HTML
- Browser normalisation of HTML
- 浏览器规范化HTML
- Manipulation of the DOM via JavaScript
- 通过JavaScript操作DOM