javascript - изменить - получить ширину элемента js




Получить фактическую ширину и высоту компонента (5)

Вы часто сталкиваетесь с этим, если вам нужно сначала скрыть компоненты, такие как аккордеоны, слайдеры и другие вещи, которые требуют правильной работы с информацией о ограничительной коробке.

Простым трюком является просто добавить css, который скрывает видимость содержимого, о котором идет речь, и гарантирует, что он не мерцает или не мешает вашему макету.

Это может быть просто: 

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

А затем снова установите положение на статичное или относительное и видимое на видимое, когда вы будете готовы показать компонент.

Скрипка здесь, но там не так много: http://jsfiddle.net/gwwar/ZqQtz/1/

Мы сталкиваемся с довольно страшной проблемой в 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 width и height, но ни одно из них не работает с объектом DOM, который не отображается непосредственно на странице. Другой подход, который я пробовал, - это несколько функций, добавляющих объект в document.body, получение ширины и высоты, а затем сразу же его удаление - однако, поскольку наши файлы CSS очень специфичны, это ненадежно, если вы не введете весь rootElement, который будет ужасная производительность и память, поскольку наши компоненты становятся довольно сложными.

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

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

Не знаю, помогает ли это, но так как вы просили какой-либо ответ :) вот что у меня есть.

У меня была аналогичная проблема, когда я хотел иметь хороший эффект jQuery, чтобы изменить размер контейнера HTML на «авто» высоту и ширину в соответствии с внутренним контентом. Идея по-прежнему похожа на то, что некоторые люди уже упомянули здесь: у вас есть контейнер где-нибудь «с экрана», вы помещаете туда свой материал, измеряете размеры и удаляете его. Итак, вот функция, которую я нашел здесь 

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

Этот код имеет немного больше, чем вам нужно, но часть, которая вас может заинтересовать, заключается в следующем: 

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

Надеюсь это поможет

Проблема здесь в том, что вы не можете получить размер элемента, прежде чем добавлять этот элемент на странице.

В вашем методе «constructElement» вы добавляете элемент в корневой элемент, но только на onload, который вы добавляете на страницу. Свойство «rootElement» не имеет установленных свойств размера.

Пересмотрите структуру вашего объекта / метода, если вы хотите управлять этими свойствами.

Посмотрите мое обновление своей скрипки 

$(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"));
});

Получение визуализированной ширины и высоты узла DOM с коробкой модели с использованием javascript без фактического добавления его в DOM, который будет отображаться, невозможно.

Чтобы это доказать, давайте рассмотрим, как визуализированная высота и ширина узла DOM вычисляются внутри браузера. Я расскажу, как WebKit обрабатывает это, поскольку он является наиболее часто используемым механизмом компоновки.

По мере анализа документа и добавления узлов DOM в «DOM Tree» Renderers создаются для узлов DOM, которые необходимо отобразить. Так создается «Render Tree».

Вот выдержка из статьи, озаглавленной «WebCore Rendering I - The Basics» Дейва Хаятта в официальном блоге WebKit:

«Renderers создаются с помощью процесса в DOM, называемого вложением. Когда документ анализируется и добавляются узлы DOM, для создания рендеринга на узлах DOM вызывается метод под названием attach .

void attach()

Метод attach вычисляет информацию о стиле для узла DOM. Если для свойства CSS отображения для элемента установлено значение none или если узел является потомком элемента с отображением: ни один не установлен, то никакой рендер не будет создан ».

Таким образом, чтобы быть эффективными, браузер даже не беспокоился о том, что информация о стиле стилей для элементов с дисплеем не установлена. В результате информация недоступна для доступа через javascript. Однако, если свойство display не установлено равным none, происходит следующее:

«При вложении DOM запрашивает CSS для получения информации о стиле для элемента. Полученная информация хранится в объекте с именем RenderStyle ... Доступ к RenderStyle можно получить из RenderObject с помощью метода style () ... Один из основных Подклассы рабочей лошади RenderObject представляют собой RenderBox. Этот подкласс представляет объекты, которые подчиняются модели окна CSS. К ним относятся любые объекты, которые имеют границы, отступы, поля, ширину и высоту ».

Поэтому, если ваш прецедент позволяет получить высоту и ширину рендеринга коробки-модели с помощью C / C ++ непосредственно из браузера и передать ее в код javascript с помощью других средств, вы можете запросить методы высоты и ширины RenderBox подкласс каждого элемента DOM. Это в основном то, как WebKit Developer Tools получает эту информацию.






элемента   ширину   получить   изменить   высоту   вывести   блока   clientwidth   javascript   jquery   html   css   dom  


dom