Get actual width and height of a component

Question

We\'re facing a fairly scary issue in JavaScript that none of us seems to be quite capable of resolving:

How do we get the width and height of a DOM element, including

Answer 1

Since you'd asked for related answers...

If your DOM elements are not to be dynamically sized by it's contents, I would suggest the following workflow.

Although it can make your DOM structure a bit more bloated, it is often better off to utilize "container" objects. These objects would possess no borders, padding or margins to keep their DOM dimensions predictable. Then you can force the child to expand snuggly within it's container's bounds.

Your container object would be use for querying specific sizing and placement, since there are no extra attributes to account for size distortion.

http://jsfiddle.net/aywS6/

CSS

#container {
    position: absolute;
    margin:0px;
    padding:0px;
    width: 300px;
    height: 100px;
    background: #aaa;
    border: 0 none;
}

#subject {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 10px 20px;
    background: #aaf;
}

HTML

    

        contents...