Разница между исходным кодом и элементом проверки

Я не могу найти определенный элемент стиля в моем коде, который мне удалось редактировать, используя редактор кода в Chrome и Firefox (firebug). Что подводит меня к моему вопросу, почему источник представления отличается от фактического кода? Я знаю, что JQuery и Javascript что-то делают с ним (добавление классов и нежелательной...), потому что я использую модальный интерфейс JQuery, но почему я не могу найти элементы стиля??? Где они?

Исходный код:

<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;, который я хочу изменить, но я искал его в коде и, по-видимому, не существует.

Является ли этот атрибут стиля динамически сгенерирован?

ОБНОВЛЕНИЕ:. На основе ваших отзывов, как я могу обновить ширину модальности электронной почты, если атрибут стиля динамический?

Ответ 1

Я согласен с Джо Эносом, но есть и другие причины, которые могут быть причиной.

  • Возможно, вы просматриваете источник электронной почты, например: gmail

    Объектом, который вы просматриваете, является электронное письмо, что gmail автоматически редактирует div и одновременно добавляет несколько классов или идентификаторов, чтобы убедиться, что их пользовательский интерфейс не взломан и не сломан.

  • Вы используете некоторую связь с другими файлами CSS или JS, такими как мои. Здесь: site Это макет сайта для моего сайта, который я использую в качестве кода. Но что происходит, когда оно выполняется! Здесь почти противоположно: inspect В элементе проверки вы можете видеть, что в HTML добавлено много классов, чего мы никогда не делали. Откуда это взялось? Его запросы JS или CSS @media я не уверен в этом. Но это произошло оттуда, вы можете видеть, что я связал много файлов JS и CSS.

Приблизьтесь к точке!

Что вы говорите, что Исходный код так сильно отличается от реального, вы ошибаетесь. Поскольку, когда вы используете функцию для записи ot для удаления класса, вы действительно знаете, где вы вызываете эту функцию. Например:

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

И вы всегда будете знать, что этот класс был добавлен в этот элемент при загрузке страницы.

Другой разумный браузер сам никогда не добавляет ничего в DOM.

И да, вы можете изменить свойства css динамически. Используйте это:

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

Эта строка будет переопределять любое другое свойство CSS для этого элемента с тем, который вы только что предоставляете. Или, другими словами, jQuery over записывает свойства DOM, которые вы получаете с сервера.

Еще одна вещь:

Вы не можете использовать jQuery для постоянного изменения значений CSS файла, для этого вы должны использовать для него какой-то серверный язык. jQuery может изменить содержимое веб-страницы один раз, когда перезагрузка страницы будет перенесена обратно.

Надеюсь, я близок к делу!:) Приветствия,

Ответ 2

Когда вы говорите "источник просмотра", я предполагаю, что вы говорите об редакторе, а не о "View Source". Когда вы "просматриваете источник" в браузере, вы получаете HTML-код, как он был доставлен сервером, а не после того, как javascript делает свою работу.

Когда вы находитесь в редакторе в своих инструментах dev, вы смотрите на DOM, как он есть на данный момент, который включает встроенные стили, синтаксические разборки и другие вещи, которые являются результатом работы javascript.

Ответ 3

Не должно быть разницы между "фактическим кодом" и "источником просмотра", поскольку последний показывает вам первый.

Источник будет отличаться от представления в инспекторе DOM, поскольку он покажет текущее состояние DOM после:

  • Восстановление ошибок браузера HTML
  • Нормализация браузера HTML
  • Манипуляция DOM с помощью JavaScript