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

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">

在"检查元素"代码中,有一个width:800px;我想要更改的样式属性,但我在代码中搜索它并且它显然不存在.

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

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

Answer 1

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

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

Answer 2

"实际代码"和"查看源代码"之间应该没有区别,因为后者显示了前者.

源将与DOM检查器中的视图不同,因为它将显示以下DOM之后的当前状态:

1. 浏览器错误恢复HTML
2. 浏览器规范化HTML
3. 通过JavaScript操作DOM

Answer 3

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

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

   您正在查看的对象是一封电子邮件，gmail 会自动编辑 div，同时添加更多类或 ID，以确保其用户界面不会被黑客入侵或损坏。

2. 您正在使用与我的其他 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 可以更改网页内容一次，当页面重新加载时，它们会移回。

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