Question

I have an empty h2 element with width=0. Afterwards I put some content in the h2 with JavaScript. How can I get the new width of the h2 element?

Before: <h2></h2>, then I do $('h2').html('hello');, then i have: <h2>hello</h2>.

Answer 1

.width() is how you get the live width of an element.

Your bigger problem is that setting a block level element’s width statically, does not allow it to expand to fit content. If you set the css of that h2 to overflow:hidden you will probably see what I mean.

Header tags by default fill the available width of the parent even when empty.