Мы сталкиваемся с довольно страшной проблемой в JavaScript, которую никто из нас не может решить:

Как мы можем получить ширину и высоту элемента DOM, включая дочерние элементы, целую блочную модель и т. Д., При этом компонент фактически не отображается на странице?

Помните: я ищу предложения. Даже ответы, которые не отвечают на вопрос полностью (или не совсем соответствуют заданным параметрам), могут и, вероятно, будут полезны.

Основная цель: я добавляю элементы HTML на страницу через Javascript - элементы HTML с размерами и стилями из базы данных. Проблема в том, что они плохо себя ведут, как правило, с плохим соответствием, один элемент больше другого из-за отступов / полей, и поэтому мне нужно проверить их фактический размер, чтобы исправить эти проблемы.

Получившееся приложение будет, как BigMacAttack описал в комментариях, «тесно связанная мозаика сторонних элементов управления HTML» будет в значительной степени точной. Это должно выглядеть как полноценное настольное приложение, а HTML, похоже, ненавидит эту идею со страстью. Не то чтобы я в этом виноват.

Во всяком случае, вот пример кода:

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;
}

Скрипка

Теперь нам нужна наша страница, чтобы динамически реагировать на размер окна и содержимое отдельных компонентов, поэтому важно иметь возможность получить размер объекта еще до его отображения. Также важно, чтобы создание объекта было четко разделено на три этапа:

создание через новый

построение дерева DOM (constructElement)

добавление в документ (либо непосредственно в тело, либо в другое дерево DOM)

Важно, чтобы мы знали размеры отдельных элементов на этапе строительства.

До сих пор мы пытались измерить его с помощью атрибутов jQuery, ширины и высоты DOM, но ничего из этого не работает с объектом DOM, который не отображается непосредственно на странице. Другой подход, который я попробовал, состоял в том, чтобы несколько функций добавили объект в document.body, получили ширину и высоту, а затем сразу удалили его - однако, поскольку наши CSS-файлы очень специфичны, это ненадежно, если вы не вставите весь rootElement, который будет ужасная производительность и память, поскольку наши компоненты становятся довольно сложными.

Я предполагаю, что подход полного удаления файлов .CSS и определения стилей непосредственно через JS решит хотя бы часть нашего затруднительного положения, но должен быть лучший путь.

Начиная щедрость, чтобы получить больше идей и предложений. Просто стреляйте в людей, даже если ответ не совсем в границах вопроса (как бы / вы это сделали и т. Д.) - цель, которую я пытаюсь достичь, - чтобы мои сгенерированные JS HTML-элементы управления должным образом соответствовали друг другу.