IE7 - Стилизация Javascript генерируется элемент - PullRequest
Новая
       12

IE7 - Стилизация Javascript генерируется элемент

2 голосов
/ 19 августа 2010

Это кажется очень любопытным, но у меня возникают проблемы с применением стилей для сгенерированных JavaScript элементов в IE7, но если я отображаю тот же элемент, что и строка, это работает.

в моем JavaScript: 

var style = document.createElement('link');
    style.setAttribute('type','text/css');
    style.setAttribute('rel', 'stylesheet');
    style.setAttribute('href', url('assets/default.css'));

document.getElementsByTagName('head')[0].appendChild(style);

это создаст тег script, который мне нравится вставлять на страницу, который содержит: 

.sample{
  background: red;
}

, а затем для страницы я добавляю .sample span к телу: 

var sample = document.createElement('span');
    sample.setAttribute('class','sample');
    sample.innerHTML = 'hello there';

document.getElementsByTagName('body')[0].appendChild(sample);

При рендеринге в IE8 / FF / Safari / Chrome и т. Д. Он довольно хорошо рендерится на красном фоне, на удивление в IE7 он не отображает красный фон.Это работает, если я преобразую элемент sample в строку, а затем добавлю его в тело, но затем я потеряю все ссылки на этот элемент, что бесполезно.

, поэтому вопрос таков:Как правильно применить стили к элементам javascript?

заранее спасибо

Ответы [ 2 ]

3 голосов
/ 19 августа 2010

Не могли бы вы попробовать изменить это: 

sample.setAttribute('class','sample');

к этому: 

sample.className = 'sample';

Как упомянул Энди E в комментариях, в IE 7 и ниже setAttribute() вслепую отображает атрибут, который вы указываете, на имя свойства (например, оно сопоставляет sample.setAttribute('class', 'sample') с sample.class = 'sample'), поэтому оно разрывается для таких атрибутов, как class, for, onload, onclick и т. Д., Где имя атрибута HTML отличается от имени свойства JavaScript.

1 голос
/ 19 августа 2010

Вы должны манипулировать элементом непосредственно при применении классов, например ::10000 

var sample = document.createElement('span');
sample.className = 'sample';
sample.innerHTML = 'hello there';

sample.style.backgroundColor = '#ff25e1';

Интересно, что вы не можете использовать слово «класс», потому что это зарезервированное слово в JS.

...