Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Как программировать динамические стили?


Автор: 12345c 31.7.2006, 18:44
Есть отладочный пример:
Код
<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.)

 

Автор: skyboy 31.7.2006, 23:00
может, http://wdh.suncloud.ru/dhtml09.htm поможет... 

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

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

Автор: 12345c 1.8.2006, 15:41
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
Цитата(12345c @  1.8.2006,  15:41 Найти цитируемый пост)
Следующий вопрос по Опере - с какой версии начинает поддерживаться?

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)