We are currently facing a complex issue in JavaScript that none of us have been able to solve:
How can we accurately determine the width and height of a DOM element, including its children, entire box model, etc., without actually displaying the component on the page?
Just a reminder: I am open to suggestions. Even partial answers or those that don't exactly meet the specified criteria could be helpful.
Main objective: I am dynamically adding HTML elements to the page via JavaScript - these elements have sizes and styles coming from a database. However, they often behave unexpectedly, leading to alignment issues where one element may be larger than another due to padding or margin differences. To address these issues, I need to accurately assess the actual size of each element.
The resulting application is envisioned as a, as BigMacAttack described in the comments, a 'tightly knit mosaic of 3rd-party HTML controls', resembling a full-fledged desktop application. Unfortunately, HTML seems to strongly resist this concept. Not that I blame it.
Here is 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 the size of the otherElement here*/
/*code for adding items into rootElement goes here*/
};
window.onload = function() {
var ex = new exampleElement("Hello", "Here's some text");
ex.constructElement();
document.body.appendChild(ex.rootElement);
};
CSS:
.exampleElement {
padding: 5px;
margin: 6px;
}
.exampleElement .exampleP {
padding: 20px;
margin: 6px;
}
It is crucial for our page to dynamically adjust to window size changes and individual component contents. Thus, being able to determine an object's size before display is essential. Additionally, it is vital that the creation of an object is divided into three distinct phases:
Instantiation via new
Construction of the DOM tree (constructElement)
Adding to the document (directly to the body or within another DOM tree)
Knowing the dimensions of individual elements during the construction phase is critical.
So far, we have attempted measurements using jQuery, DOM width and height attributes, but none of these methods work when the DOM object is not directly displayed on the page. Another method we tried involved temporarily inserting the object into the document.body, measuring its width and height, and then immediately removing it. However, given our specific CSS requirements, this approach is unreliable unless the entire rootElement is inserted, which would significantly impact performance and memory usage as our components become more complex.
One potential solution could involve completely ditching external .CSS files and defining styles directly through JavaScript. While this might alleviate some challenges, there must be a more efficient way to tackle this issue.
I'm offering a bounty to gather additional ideas and recommendations. Feel free to brainstorm, even if your answer slightly deviates from the initial question parameters. The ultimate goal is for my JavaScript-generated HTML controls to seamlessly integrate with each other.