源代码和“检查元素”之间的差异 [英] Difference between source code and "inspect element"
问题描述
我无法在我的代码中找到一个特定的样式元素，我已经能够使用Chrome和Firefox（firebug）中的代码编辑器进行编辑。这给我的问题，为什么视图源与实际代码不同？我知道JQuery和Javascript正在做一些事情（添加类和垃圾...），因为我使用模态从JQuery UI，但为什么我找不到样式元素？他们在哪里？
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???
源代码：
<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">
在inspect element代码中，有一个样式属性 width： 800px; ，我想改变，但我在代码中搜索它，它显然不存在。
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.
是否动态生成样式属性？
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?
推荐答案
我同意Joe Enos，
I agree to Joe Enos, but there are some other things that might be the cause.
-
您可能正在查看电子邮件的来源，例如：
您正在查看的对象是电子邮件，gmail会自动编辑div，并同时添加更多的类或ids，以确保其用户界面不会被黑客入侵或破解。
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.
你正在使用一些链接到其他CSS或JS文件，如我的。这里：
这是我的网站的网站布局，我用作代码。但是一旦它被执行会发生什么！几乎相反，这里：
在inspect元素中，您可以看到有很多类被添加到HTML，我们从来没有。这是从哪里来的？它的JS或CSS @media查询我不确定这一个。但它从那里，你可以看到我已经链接了许多JS和CSS文件。
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.
达到目的！
你所说的源代码与真实的不同，你是有点错误的。因为当你使用函数写ot删除类时，你实际上知道你在调用该函数。例如：
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.
其他方面，浏览器本身从不向DOM添加任何内容。
Other wise the browser itself never adds anything to the DOM.
是的，您可以动态更改CSS属性。使用这个：
And yes, you can change the css properties dynamically. Use this:
$('element').css('width', '800px');
此行将覆盖您刚刚提供的那个元素的任何其他CSS属性。或者换句话说，jQuery覆盖了您从服务器获得的DOM属性。
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.
另一件事：
您不能使用 jQuery 永久更改CSS文件的值，您必须使用一些服务器端语言。 jQuery可以改变网页内容一次，当页面重新加载它们被移回。
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.
希望我接近点！ :)干杯，
Hope I am close to the point! :) Cheers,
这篇关于源代码和“检查元素”之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
