Question

我在代码中找不到特定的样式元素，我可以使用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">

在“inspect element”代码中，我想要更改一个样式属性width:800px;，但我在代码中搜索它并且它显然不存在。

是否动态生成了该样式属性？

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

Answer 1

当你说“查看源代码”时，我假设你在谈论编辑器，而不是实际的“查看源代码”。当您从浏览器“查看源代码”时，您将获得服务器提供的HTML，而不是在javascript执行此操作之后。

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

Answer 2

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

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

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

Answer 3

我同意Joe Enos，但还有其他一些可能是原因。

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

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

即将到来！

你所说的源代码与真实代码有很大不同，你有点不对劲。因为当你使用函数来删除类时，你实际上知道你在哪里调用函数。例如：

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

您将始终知道此类已在页面加载时添加到此元素。

另外，浏览器本身从未向DOM添加任何内容。

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

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

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

还有一件事：

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

希望我接近这一点！ :)干杯，

源代码与“检查元素”之间的区别

3 个答案: