Dynamically created div does not have CSS styles in the DOM in IE8

Question

Using jQuery in IE8, I'm creating a div with a class (ex. <div class="className"></div> ). This class has several CSS styles on it, including background , margin , and border . When debugging the javascript in IE9 (running as IE8), and inspecting the element, all of the currentStyles have the default values, instead of the values from the CSS. So, when I try to get the margin , it comes back as being set to auto even though the CSS puts it at 10px .

The script has no errors and it does work as expected in Firefox, Chrome, and IE9. Any thoughts?

Answer 1

There is a refresh button in Developer tools. That reloads the DOM tree without reloading the page.

If you do DOM changes with JavaScript, they are not reflected in the MSIE developer tools, unless you klick the refresh button. See image below:

Answer 2

With some help from the comments above (under the original question), I found out that the div was not actually in the DOM at the time I was trying to get its CSS properties, which is why I was seeing only the default CSS for the element. Granted, IE9, Firefox, and Chrome all handled this fine, but it does make sense that the element would need to be in the DOM first.

As a workaround, I append() a hidden input to the DOM, with the same classes as the div . I can then get the CSS properties/values that I need and then remove the input . While not ideal, this is an acceptable solution for the time being.