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


Автор: Smertch 24.12.2008, 13:12
Здравствуйте.
Не совсем уверен, что выбрал правильный раздел для своей темы, но все же.
Проблема такая: приложение с использованием AJAX.
Ява-скрипт получает данные с сервера и на их основе добавляет к странице элементы. Отображение элементов естественно настраивается стилями. 
Файрфокс и Опера замечательно все отрабатывают и отображают. А ИЕ (версия 7) вообще не применяет к создаваемым элементам стили.
Посоветуйте пожалуйста, как это исправить.

Автор: An6rey 24.12.2008, 20:25
Форум действительно не совсем тот - вопрос для начинающих.
Не понятно что не работает. Но судя по тому что в ФФ и ИЕ работает по-разному - ты пытаешься динамически загрузить таблицы стилей.
Это можно сделать так кроссбраузерно

Код

var element=document.createElement("LINK");
element.setAttribute("rel","stylesheet");
element.setAttribute("type","text/css");
element.setAttribute("href","...");
document.body.appendChild(element);


В случае если просто присвоить  innerHTML (ты наверное так делаешь) - работает только в ФФ/О.

Автор: Smertch 25.12.2008, 04:48
Как раз таблица стилей грузится статически, через обычный html
Код

  <link rel="stylesheet" type="text/css" href="style.css"/>

Постараюсь описать проблему поточнее:
Создаю элементы через DOM
Выкладываю функцию целиком:
Код

function SetAnimal() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      if (request.responseText!="DENY") {
        var response = request.responseText.split("|");
        var AnimalDiv = document.createElement("div");
        AnimalDiv.setAttribute("class", "Animal");
        AnimalDiv.setAttribute("id", "Animal"+AnimalCount);
        AnimalDiv.style.left=document.getElementById("Map").offsetLeft+response[0]*5-5;
        AnimalDiv.style.top=document.getElementById("Map").offsetTop+response[1]*5-5;
        var AnimalA = document.createElement("a");
        AnimalA.setAttribute("class", "tt");
        AnimalA.setAttribute("href", "javascript:");
        AnimalDiv.appendChild(AnimalA);
        var AnimalDot = document.createElement("img");
        AnimalDot.setAttribute("src", "images/dot.png");
        AnimalA.appendChild(AnimalDot);
        var AnimalTip = document.createElement("span");
        var AnimalPre = document.createElement("pre");
        var text = "Name: " + response[2]+"\nPosition: " + response[0] + "," + response[1];
        text += "\nOwner: " + response[3]+"\nState: " + response[7]+"\nHunger: " + response[4];
        text += "\nThirst: " + response[5];
        AnimalPre.appendChild(document.createTextNode(text));
        AnimalTip.appendChild(AnimalPre);
        AnimalA.appendChild(AnimalTip);
        document.getElementById("MapBlock").insertBefore(AnimalDiv,document.getElementById("Map"));
      } else
        alert("Нельзя установить животное в данную точку.");
    } else
      alert("status is " + request.status);
  }
}

В ФФ/О выполняется полностью.
В ИЕ к создаваемым элементам стили не применяются вообще. Например стиль "Animal", прописанн статически в файле css.
Положение создаваемого объекта тоже задается через стили, но уже динамически - в ИЕ также не работает.
Пробовал тот же сгенерированный код вставить в html статически - работает. Параметры стиля динамически тоже изменяет.
Вот сгенерированный с помощью ИЕ код. Выполняется сам по себе без проблем.
Код

<DIV id=Animal0 style="LEFT: 105px; TOP: 436px" class="Animal"><A href="javascript:" class="tt"><IMG height=5 src="images/dot.png" width=5><SPAN><PRE>Name: Ywuipa
Position: 12,48
Owner: Smertch
State: idle
Hunger: 100
Thirst: 100</PRE></SPAN></A></DIV>

Автор: An6rey 25.12.2008, 23:32
Ну это проще. Атрибут используемый ИЕ - className. Но его не знает ФФ.
Лучше использовать не атрибут а свойство className. Впрочем можно задавать атрибуты и class и className.

Автор: Smertch 26.12.2008, 00:28
О боже, и из-за такой мелочи оно не работало... =\ Буквально недавно прочитал статью именно об этом, подумал что ко мне не относится и не обратил внимания =)
An6rey, спасибо большое =)
---
Зато ИЕ игнорирует переносы строки в теге <PRE>, но с этим думаю уже как-нибудь разберусь...

Автор: An6rey 26.12.2008, 01:00
Код

"\n\r"

Автор: Smertch 26.12.2008, 01:23
Попробовал оформить перенос как "\r\n". В ИЕ отображается тольком "\r", в ФФ - только "\n", но в Опере выводятся оба и получается 2 переноса... =\\\\
---
"\n\r" все же заработало, но в ИЕ дополнительный пробел появился на всех строках кроме первой =))
эхх весело яваскрипты писать... )

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