23

我在我的代码中找不到特定的样式元素，我可以使用 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;我想更改的样式属性，但我在代码中搜索过它，它显然不存在。

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

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

4

3 回答 3

31

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.

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.

于 2013-09-23T19:36:43.353 回答
12

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:

  1. Browser error recovery of HTML
  2. Browser normalisation of HTML
  3. Manipulation of the DOM via JavaScript
于 2013-09-23T19:36:13.580 回答
6

我同意 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 可以更改网页内容一次，当页面重新加载时它们会被移回。

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

于 2013-09-23T19:56:21.347 回答