Viewing DOM Properties

[Jim Stapleton]

This is not really a Firebug issue per se, but a "how do you do it" one. I'm trying to obtain the width of an element and regardless of method used (JQuery or pure Javascript) the return from say, document.getElementById("ent-13").clientWidth() or $("#ent-13").width() both return zero. When I look at the DOM panel in Firebug I see a non-zero value.

What kind of magic does Firebug use to get real values when the standard ones don't work?

[Sebastian Zartner]

What kind of magic does Firebug use to get real values when the standard ones don't work?

In this case none. You should be able to get the width via document.getElementById("ent-13").clientWidth. It's a property, so don't add brackets.
Note that the clientWidth only includes the padding but not the border or the margin.

If it still doesn't work for you, please provide a URL to your side, so I can test it myself.

Sebastian

[Jim Stapleton]

Thank you for your quick response. I really did use just "clientWidth" in my testing. The parens were added in my haste.

My site is not online, but I can give you some snippets..

The element in question:

 <span onclick="showPass()" class="downentry" id="ent-13">John Payne</span>

The CSS:

.downentry {
    text-decoration:none;
    position: relative;
    white-space: nowrap;
    display: block;
    width: auto;
}

In the Firebug console I've tried:

$("#ent-13").width()     ( returns null)

$("#ent-13").outerWidth()  (returns null)

document.getElementById("ent-13").clientWidth   (returns 0)

I have successfully accessed these properties a zillion times before and never had this problem until now. One thing that IS different, and it just occurred to me, is that all of these elements I'm having difficulty with are inside of a Qtip. I have other code with using the ...clientWidth property that works fine. Nonetheless, Firebug doesn't seem to have any trouble wading through it Qtip or not.

I'm very grateful that you even answered me and feel reluctant to continue in this forum since it might be a Qtip issue. No hard feelings if no one decides to reply!

Thanks,

Jim

[Jim Stapleton]

I tested it outside of a Qtip and the width is reported accurately. Seems as if Qtip is performing its own 'magic' that I need to understand as well as why Firebug can do it.

Thanks, Jim

On Sunday, September 8, 2013 12:56:49 PM UTC-4, Jim Stapleton wrote:

[Sebastian Zartner]

Note that clientWidth is read-only, which means qTip can't change it directly.
Maybe it helps you to know that the CSSOM standard says that clientWidth returns 0 if the element doesn't have any CSS layout box associated or if the layout box is inline.

Though without a test case it's hard to give more info than that.

Sebastian