Как узнать CSS-свойство, для несуществующего элемента документа?

[g-smagin]

Из вопроса в заголовке, наверно, не очень понятно, что я имею в виду (google вот так и не понял ).

Поясню подробнее. Есть определенный где-либо стиль:

.example {
    width: 9000px;
}

элемент с таким стилем создается динамически.
получаем, к примеру, такую ситуацию:

// здесь требуется узнать ширину стиля, до появления элемента в документе
// ...

el.innerHTML = '<div class="example"></div>';

// здесь уже можно узнать ширину по элементу

я создаю анимацию на JS, где для вычислений требуется знать габариты ряда элементов раньше, чем они появится на экране

в эффекте много изображений, большинство - нужно подгружать постепенно, завязано на Ajax и все такое.

разумеется, можно так: добавить невидимый элемент, узнать ширину, уничтожить элемент. но! это криво!

PS
нашел в FF отладчиком такой путь (по DOM дереву через элемент HEAD): this.documentElement.children[...].childNodes[...].sheet.cssRules[...].selectorText

где хранятся все стили. есть ли более просто путь узнать, чем перебирать HEAD на предмет <LINK ...>? и кроссбраузерно ли это?

спасибо всем, кто дочитал до конца!

[g-smagin]

хм. неожиданно нашлось решение.

тегу link задается идентификатор (это исключительно для удобства), document.getElementById('...') вернет объект типа styleSheet, со всеми вытекающими.

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

[monolithed]

el.innerHTML('<div class="example"></div>');

innerHTML - это свойство, а не метод!

получить значение стиля:

var element = document.body;
alert(element.currentStyle.width || window.getComputedStyle(element, null).width);

[Aetae]

var element = document.body;
alert(element.currentStyle.width || window.getComputedStyle(element, null).width);

ошибка: element.currentStyle is undefined

Да и не о том вас спрашивали.

g-smagin
Google:
http://www.quirksmode.org/dom/changess.html
http://stackoverflow.com/questions/3...ith-javascript

[g-smagin]

innerHTML - это свойство, а не метод!

разумеется! поправлю. это я по привычке калькой с jQuery написал на чистом JS давно не писал.

Google:
http://www.quirksmode.org/dom/changess.html
http://stackoverflow.com/questions/3...ith-javascript

спасибо, самое то! разобрался, что к чему.

[x-yuri]

разумеется, можно так: добавить невидимый элемент, узнать ширину, уничтожить элемент. но! это криво!

а какие критерии у твоего "криво"? В общем случае, нельзя выяснить любой стиль, не отображая элемент, особенно если вспомнить про стили по умолчанию и пользовательские стили и про то, что требуемый стиль может быть не задан для элемента. Так что заставить браузер отобразить элемент - очень логичный ход

кроме того, зачем его сразу же удалять? Когда надо, тогда и удалишь...

p.s. а ты всерьез решился написать ту самую часть браузера, которая выясняет, какие стили относятся к элементу? Хаки будут поддерживаться?

[g-smagin]

x-yuri,

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

мне нужна лишь та часть, которая определяет свойство width / height / margin (этого достаточно, чтобы уложить картинки "таблицей"). другие стили меня не касаются.

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

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

[g-smagin]

x-yuri,

а о каких хаках идет речь?

[x-yuri]

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

и в чем проблема? Не обязательно показывать картинку сразу после того, как выяснил размеры. По крайней мере, исходя из того, что ты рассказал, никаких проблем не вижу

кроме того, ты размеры картинок в css указываешь? Это не криво? Зачем дублировать информацию, если этого можно избежать?

а о каких хаках идет речь?

забудь, я имел в виду, что реализация твоей идеи в общем случае - не такая простая задача

[g-smagin]

и в чем проблема? Не обязательно показывать картинку сразу после того, как выяснил размеры. По крайней мере, исходя из того, что ты рассказал, никаких проблем не вижу

да, я уже переписал на другой вариант: все необходимые картинки в определенный момент загружаются с абсолютной позицией и display: none;
пришлось перевернуть порядок действий.

кроме того, ты размеры картинок в css указываешь? Это не криво? Зачем дублировать информацию, если этого можно избежать?

мне самому было бы проще:
state1 = {w: 150, h : 110, margin : 10};
state2 = ...; state3 = ...;
но таково требование: верстальщик делает макет в CSS, и этот макет должен быть изменяемым им же. моя задача сделать вычисления на основе размеров там и использовать картинки с заданными стилями.

забудь, я имел в виду, что реализация твоей идеи в общем случае - не такая простая задача

ну это понятно. хотя вполне можно парсить selectorText. в моем же случае предполагалось, что искомый selectorText будет as is имя класса.