Determine the real offsetWidth/offsetHeight of the dom object or html string

Suppose, you know to know the exact pixel of width/height of dom element or html string that are not yet added to the browser document yet. I developed a function that can do this stuff by the support from my boss, Chris.


/**
* Method to calculate the size of the content
* and return back the object which contains the width and the height of the content
* @param {Object} node - html string or dom element
* @return {object} width/height of content
*/
function calculateContentSize(node) {
var realWidth, realHeight, tmpDiv, previousDisplay;
tmpDiv = document.createElement("div");
tmpDiv.style.visibility = "hidden";

//dom object
if(typeof node == "object" && node != null) {
previousDisplay = node.style.display;
//must set node to inline
node.style.display = "inline";
tmpDiv.appendChild(node);
//must set node container to inline too
tmpDiv.style.display = "inline";
document.body.appendChild(tmpDiv);
realWidth = tmpDiv.offsetWidth;
realHeight = tmpDiv.offsetHeight;
node.style.display = previousDisplay;
document.body.removeChild(tmpDiv);
}

//html string
else if(typeof node == "string" && node != "") {
previousDisplay = tmpDiv.style.display;
tmpDiv.innerHTML = node;
tmpDiv.style.display = "inline";
document.body.appendChild(tmpDiv);
realWidth = tmpDiv.offsetWidth;
realHeight = tmpDiv.offsetHeight;
tmpDiv.style.display = previousDisplay;
document.body.removeChild(tmpDiv);
}
else {
realWidth = 0;
realHeight = 0;
}

return {width: realWidth, height: realHeight};
}


This function create a temporary div container, set its visibility to "hidden", set its display style to "inline", append the content to this container, append this container to the browser document, and use offsetWidth/offsetHeight property of this container before it was removed from the browser document.

Remember, if it is a dom object, you must set its display style and the temporary container to "inline" to make this function working.