Difference between source code and "inspect element"

Question

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

Source Code:

<div id="modalEmail-ESI" title="Email - ESI" class="infoModal">

From Code Editor:

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

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?

Answer 1

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.

Answer 2

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

Answer 3

I agree to Joe Enos, but there are some other things that might be the cause.

1. You might be viewing a Source of an email, for example:

   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.

2. 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.

Coming to the point!

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.

Other wise the browser itself never adds anything to the DOM.

And yes, you can change the css properties dynamically. Use this:

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

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.

One more thing:

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,