VPF::Как программировать динамические стили?

12345c

Дата 31.7.2006, 18:44 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Есть отладочный пример:

Код

<style>.a{background-color:red}</style>
<style id=s1>.b{color:blue;}</style>
<style id=s2>.b{color:blue;}</style>

<script>onload=function(){document.getElementById('s1').innerHTML=".c{background-color:green;}";}</script>

<script>document.getElementById('s2').innerHTML=".d{background-color:darkblue;}";</script>

<div class=a>111</div>
<div class=b>222</div>
<div class=c>333</div>
<div class=d>444</div>

После запуска видим, что в FF срабатывают оба скрипта - стиль, описанный в тегах стиля, меняется. IE,Opera так не допускают (оно и понятно, стиль должен не только присвоиться тегу, но и "выполниться" - генерация потока страницы должна пройти его).

Как выполнить такое назначение стиля? (Динамически сгенерировать строку стиля на клиенте и заставить её работать, в IE, Opera.)

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

skyboy

Дата 31.7.2006, 23:00 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 10
Всего: 260

может, это поможет...

Sardar

Дата 1.8.2006, 02:12 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

12345c, попробуй document.documentElement.style.display="none";... ="";, всё моргнёт, но стили может обновяться.

В ИЕ и возможно в Опере есть object.style.cssText = "стили" позволяющие задать текстом стили для элемента, как обходной вариант если не поможет.

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

12345c

Дата 1.8.2006, 15:41 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

skyboy, да, там всё есть, +1

Sardar, не получается, потому что IE-opera сразу говорит, что "так низзя" - даёт ошибку на вызов именованного стиля.

Итого,
1) стили в IE-opera именовать (id, name) нельзя - доступ к ним - только через document.styleSheets[].rules[];
2) прочитать оператор стиля:
IE -
document.styleSheets[i].rules[j].selectorText - селектор (тег, класс, элемент, каскад);
document.styleSheets[i].rules[j].style.cssText - текст стиля, который в фигурных скобках;
FF -
document.styleSheets[i].cssRules[j].selectorText - селектор;
document.styleSheets[i].cssRules[j].cssText - текст стиля;
(однако, с разницей, если селекторы через ","!).
3) записать оператор стиля (заменить - не существует?)
IE - document.styleSheets[i].addRule("селектор","текст",j) - 3 параметра;
FF - document.styleSheets[i].insertRule("селектор{текст}",j) - 2 параметра;
(если ошибиться с видом параметров, IE хорошо подвешивается, но система устоит smile

).
Вставляет стиль перед существующим номером или в конец, если j - длина массива styleSheets.

Opera 7.54 - нет такой коллекции styleSheets[] , не умеет программировать стили.
Следующий вопрос по Опере - с какой версии начинает поддерживаться?

Тестовый код для проверки версий:

Код

<html><head><style>.a{background-color:red}</style>
<style id=s1>.b{color:blue;}</style>
<style id=s2>.d,.e .v{color:blue;}</style>
</head><body> <!--head-body не обязательно-->
<script>/*onload=function(){document.getElementById('s1').innerHTML=".c{background-color:green;}";}*/</script>

<script>/*document.getElementById('s2').innerHTML=".d{background-color:darkblue;}";*/
d=document
onload=function(){
  if(!self.opera){
    if(d.all)
    alert(d.styleSheets[2].rules[0].selectorText
      +'/'+d.styleSheets[2].rules[0].style.cssText);
    else
    alert(d.styleSheets[2].cssRules[0].selectorText
      +' // '+d.styleSheets[2].cssRules[0].cssText);
  if(d.all){
    d.styleSheets[1].removeRule(0);
    d.styleSheets[1].addRule(".c","background-color:green;",0);
    d.styleSheets[2].removeRule(0);
    d.styleSheets[2].addRule(".d","background-color:darkblue;color:white",0);
  }else{
    d.styleSheets[1].deleteRule(0);
    d.styleSheets[1].insertRule(".c{background-color:green;}",0);
    d.getElementById('s2').innerHTML=".d{background-color:darkblue;color:white}";
  }}else alert(d.styleSheets)
}

</script>
<b>Программирование стилей:</b><br><br>
<div class=a>red</div>
<div class=b>none</div>
<div class=c>green</div>
<div class=d>darkblue</div></body></html>

skyboy

Дата 1.8.2006, 16:34 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 10
Всего: 260

Цитата(12345c @ 1.8.2006, 15:41

)

Следующий вопрос по Опере - с какой версии начинает поддерживаться?

Opera 8.54 не отобразила, как надо smile

Ещё и source показывать отказалась - хорошо, хоть окно закрыть позволила...
Так что надежда только на 9-ю ветвь %(

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »