Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.01.2011, 01:50
Интересующийся
Отправить личное сообщение для g-smagin Посмотреть профиль Найти все сообщения от g-smagin
 
Регистрация: 15.06.2010
Сообщений: 11

Как узнать CSS-свойство, для несуществующего элемента документа?
Из вопроса в заголовке, наверно, не очень понятно, что я имею в виду (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, 08.01.2011 в 03:00. Причина: опечатка
Ответить с цитированием
  #2 (permalink)  
Старый 08.01.2011, 02:15
Интересующийся
Отправить личное сообщение для g-smagin Посмотреть профиль Найти все сообщения от g-smagin
 
Регистрация: 15.06.2010
Сообщений: 11

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

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

но почва для работы еще большая. может какие-то капризы браузеров и тому подобное. странно, что информации по этому вопросу так мало.
Ответить с цитированием
  #3 (permalink)  
Старый 08.01.2011, 02:37
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от g-smagin
el.innerHTML('<div class="example"></div>');
innerHTML - это свойство, а не метод!

получить значение стиля:
var element = document.body;
alert(element.currentStyle.width || window.getComputedStyle(element, null).width);
Ответить с цитированием
  #4 (permalink)  
Старый 08.01.2011, 02:43
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Сообщение от monolithed Посмотреть сообщение
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
Ответить с цитированием
  #5 (permalink)  
Старый 08.01.2011, 03:00
Интересующийся
Отправить личное сообщение для g-smagin Посмотреть профиль Найти все сообщения от g-smagin
 
Регистрация: 15.06.2010
Сообщений: 11

Сообщение от monolithed Посмотреть сообщение
innerHTML - это свойство, а не метод!
разумеется! поправлю. это я по привычке калькой с jQuery написал на чистом JS давно не писал.

Сообщение от Aetae Посмотреть сообщение
Google:
http://www.quirksmode.org/dom/changess.html
http://stackoverflow.com/questions/3...ith-javascript
спасибо, самое то! разобрался, что к чему.
Ответить с цитированием
  #6 (permalink)  
Старый 08.01.2011, 04:50
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

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

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

p.s. а ты всерьез решился написать ту самую часть браузера, которая выясняет, какие стили относятся к элементу? Хаки будут поддерживаться?
Ответить с цитированием
  #7 (permalink)  
Старый 08.01.2011, 13:37
Интересующийся
Отправить личное сообщение для g-smagin Посмотреть профиль Найти все сообщения от g-smagin
 
Регистрация: 15.06.2010
Сообщений: 11

x-yuri,

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

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

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

в общем случае, меня просто заинтересовала возможность узнавать стили до появления элемента.
Ответить с цитированием
  #8 (permalink)  
Старый 08.01.2011, 13:38
Интересующийся
Отправить личное сообщение для g-smagin Посмотреть профиль Найти все сообщения от g-smagin
 
Регистрация: 15.06.2010
Сообщений: 11

x-yuri,

а о каких хаках идет речь?
Ответить с цитированием
  #9 (permalink)  
Старый 08.01.2011, 16:06
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

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

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

Сообщение от g-smagin
а о каких хаках идет речь?
забудь, я имел в виду, что реализация твоей идеи в общем случае - не такая простая задача
Ответить с цитированием
  #10 (permalink)  
Старый 08.01.2011, 16:23
Интересующийся
Отправить личное сообщение для g-smagin Посмотреть профиль Найти все сообщения от g-smagin
 
Регистрация: 15.06.2010
Сообщений: 11

Сообщение от x-yuri Посмотреть сообщение
и в чем проблема? Не обязательно показывать картинку сразу после того, как выяснил размеры. По крайней мере, исходя из того, что ты рассказал, никаких проблем не вижу
да, я уже переписал на другой вариант: все необходимые картинки в определенный момент загружаются с абсолютной позицией и display: none;
пришлось перевернуть порядок действий.

Сообщение от x-yuri Посмотреть сообщение
кроме того, ты размеры картинок в css указываешь? Это не криво? Зачем дублировать информацию, если этого можно избежать?
мне самому было бы проще:
state1 = {w: 150, h : 110, margin : 10};
state2 = ...; state3 = ...;
но таково требование: верстальщик делает макет в CSS, и этот макет должен быть изменяемым им же. моя задача сделать вычисления на основе размеров там и использовать картинки с заданными стилями.

Сообщение от x-yuri Посмотреть сообщение
забудь, я имел в виду, что реализация твоей идеи в общем случае - не такая простая задача
ну это понятно. хотя вполне можно парсить selectorText. в моем же случае предполагалось, что искомый selectorText будет as is имя класса.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как подгрузить стиль для определённой ссылки? Negative Элементы интерфейса 1 11.11.2009 16:45
Для события onCLick получить индекс строки и объект грида. progi2007 ExtJS 4 05.08.2009 11:31
Как получить список всех установленных плагинов VitAngel Internet Explorer 0 15.07.2009 09:13
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30
Можно ли как для произвольного массива создавать вызовы функций , имеющих на входе kefi Общие вопросы Javascript 3 17.04.2009 16:53