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

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

Поясню подробнее. Есть определенный где-либо стиль:
элемент с таким стилем создается динамически.
получаем, к примеру, такую ситуацию:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

x-yuri,

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

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

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

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

x-yuri,

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

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

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

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

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

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

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