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 children, entire box model etc. without the component actually being displayed on the page?

Remember: I'm looking for suggestions. Even answers which don't answer the question fully (or don't quite fit with the specified parameters) might, and probably will, be helpful.

Main goal: I'm adding HTML elements into the page via Javascript - HTML elements with sizes and styles from a database. Problem is that they misbehave, usually bad aligment, one element is larger than another due to padding/margin whatever, and so I need to check their actual size to fix these issues.

The resulting application is going to be a, as BigMacAttack has described it in the comments, a 'tightly knit mosaic of 3rd-party HTML controls' would pretty much be spot-on. It needs to look a lot like full-fledged desktop application, and HTML seems to hate the idea with passion. Not that I blame it.

Anyway, here's some example code:

JavaScript:

function exampleElement(caption, content) {
    this.caption = caption;
    this.content = content;
    this.rootElement = document.createElement("div");
}

exampleElement.prototype.constructElement = function() {
    var otherElement = document.createElement("p");
    this.rootElement.className = "exampleElement";
    this.rootElement.textContent = this.caption; 
    otherElement.className = "exampleP";
    otherElement.textContent = this.content;
    this.rootElement.appendChild(otherElement);
    /*I need to know size of the otherElement here*/
    /*here goes code adding stuff into rootElement*/
};

window.onload = function() {
    var ex = new exampleElement("Hello", "Here's text");
    ex.constructElement();
    document.body.appendChild(ex.rootElement);
};

CSS:

.exampleElement {
    padding: 5px;
    margin: 6px;
}

.exampleElement .exampleP {
    padding: 20px;
    margin: 6px;
}

A fiddle

Now, we need our page to dynamically react to size of the window and to contents of individual components, that's why it's important to be able to get size of an object before even displaying it. It's also important that creation of an object is clearly separated into three phases:

• creation via new

• construction of DOM tree (constructElement)

• addition into the document (either directly into body or into another DOM tree)

It's important that we know sizes of individual elements during the construction phase.

So far we've tried measuring it via jQuery, DOM width and height attributes, but none of that works with DOM object not being directly displayed on page. Another approach I have tried were several functions adding the object into document.body, getting width and height, and then immediately removing it - however, since our CSS files are very specific, this is unreliable unless you insert the entire rootElement, which will be a terrible performance and memory hog as our components get fairly complex.

I suppose an approach of dropping .CSS files completely and defining styles directly trough JS would solve at least part of our predicament, but there has to be a better way.

Starting bounty to get more ideas and suggestions. Just shoot people, even if answer is not entirely within the boundaries of the question (how would/did you do it etc.) - the goal I'm trying to achieve is for my JS generated HTML controls to properly fit together.

Answer 1

You run into this often if you need to initially hide components like accordions, sliders, and other things that require bounding box information to work properly.

A simple trick is to just add css that hides the visibility of the content in question and ensures that it doesn't flicker or cause interfere with your layout.

It can be something as simple as:

{   visibility:hidden;
    position:absolute;
    left: -9999px;
}

And then setting position back to static or relative and visibility back to visible when you're ready to show the component.

The fiddle is here, but there's not much to it: http://jsfiddle.net/gwwar/ZqQtz/1/

Answer 2

Getting the rendered width and height of a box-model DOM node using javascript without actually adding it to the DOM to be displayed is not possible.

To prove this, let's walk through how the rendered height and width of a DOM node is calculated internally to the browser. I will reference how WebKit handles this since it is the most commonly used layout engine.

As the document is parsed and DOM nodes are added to the "DOM Tree", Renderers are created for the DOM nodes that need to be displayed. This is how the "Render Tree" gets built.

Here is an excerpt from an article entitled "WebCore Rendering I – The Basics" by Dave Hyatt on the official WebKit Blog:

"Renderers are created through a process on the DOM called attachment. As a document is parsed and DOM nodes are added, a method called attach gets called on the DOM nodes to create the renderers.

void attach()

The attach method computes style information for the DOM node. If the display CSS property for the element is set to none or if the node is a descendant of an element with display: none set, then no renderer will be created."

So, in order to be efficient, the browser does not even bother computing style information for elements with display set to none. As a result, the information is not available to be accessed via javascript. However, if the display property is not set to none, the following occurs:

"During attachment the DOM queries CSS to obtain style information for an element. The resultant information is stored in an object called a RenderStyle... The RenderStyle can be accessed from a RenderObject using the style() method... One of the principal workhorse subclasses of RenderObject is RenderBox. This subclass represents objects that obey the CSS box model. These include any objects that have borders, padding, margins, width and height."

So if your use case allows for you to retrieve the box-model rendering height and width via C/C++ directly from the browser and pass it to your javascript code via some other means, then you could query the height/width methods of the RenderBox subclass of each DOM element. This is basically how the WebKit Developer Tools gets this information.

Answer 3

You can try this jQuery plugin : https://github.com/dreamerslab/jquery.actual

Answer 4

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

<div id="container">
    <div id="subject">
        contents...
    </div>
</div>

Answer 5

The problem here is you can't get the element size before you add this element on the page.

On your method "constructElement", you adding the element to a root element, but just on onload you adding to the page. Your property "rootElement" not have the size properties setted.

Rethink the structure of your object/method if you want to manipulate these properties.

Look my update of your fiddle

$(function ()
{
    var ex = new exampleElement("Hello", "Here's text");
    ex.constructElement();
    document.body.appendChild(ex.rootElement);

    $("<span/>")
        .text(" => Width is " + $("div").width() + ", and Height is " + $("div").height())
        .appendTo($("div p"));
});

Answer 6

Don't know if that helps, but since you asked for any answer :) here is what I have.

I had a similar issue where I wanted to have nice jQuery effect to resize an HTML container to "auto" height and width according to it's inner content. The idea is still similar to what some people already mentioned here: you have a container somewhere "off the screen", you put your stuff there, measer the dimentions and delete it. So here is the function I have found here

jQuery.fn.animateAuto = function(prop, speed, callback) {
    var elem, height, width;
    return this.each(function(i, el) {
        el = jQuery(el), elem = el.clone().css({
            "height" : "auto",
            "width" : "auto"
        }).appendTo("body");
        height = elem.css("height"), width = elem.css("width"), elem.remove();

        if (prop === "height")
            el.animate({
                "height" : height
            }, speed, callback);
        else if (prop === "width")
            el.animate({
                "width" : width
            }, speed, callback);
        else if (prop === "both")
            el.animate({
                "width" : width,
                "height" : height
            }, speed, callback);
    });
};

This code has a little more than you need but the part that you might be interested in is this:

elem = el.clone().css({
                "height" : "auto",
                "width" : "auto"
}).appendTo("body");
height = elem.css("height")
width = elem.css("width")

Hope this helps

Answer 7

If the main problem is that you can't get the size before placing it onto the screen I would recommend creating a class that allows the div to be hidden under the page's background. This should work cross browser.

.exampleHidden{
    position: absolute;
    z-index: -1;
}

If you set the main background of the page's z-index to 0 then attaching the hidden class to your new element it would put it under the background. Assuming it isn't larger than your background it should be hidden for now to allow you to measure and set the height and width before actually bringing it back to the foreground by removing the .exampleHidden class.