IE7 - Styling Javascript generated Element

Question

Cela semble très curieux mais j'ai des problèmes pour appliquer des styles aux éléments générés par javascript dans IE7 mais si je rends le même élément que la chaîne, cela fonctionne.

sur mon 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); 

cela va créer la balise de script que je veux intégrer dans la page, qui contient:

.sample{ 
    background: red; 
} 

puis pour la page J'ajoute une .sample portée au corps:

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

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

Lors du rendu sur IE8/FF/Safari/Chr ome, etc il rend assez bien avec le fond rouge, étonnamment sur IE7 il n'affiche pas le fond rouge. Cela fonctionne si je convertis l'élément sample en une chaîne, puis l'ajoute au corps, mais j'ai perdu toutes les références à cet élément, ce qui n'est pas bon. Donc, la question est: Comment puis-je appliquer correctement les styles aux éléments javascript?

merci à l'avance

Answer 1

Pouvez-vous essayer de le changer:

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

à ceci:

sample.className = 'sample'; 

Comme Andy E mentionné dans les commentaires, dans IE 7 et inférieur setAttribute() les cartes à l'aveuglette l'attribut que vous fournissez à un nom de propriété (par exemple, il mappe sample.setAttribute('class', 'sample') à sample.class = 'sample'), donc il se brise pour des attributs comme class, for, onload, onclick, etc. où le nom de l'attribut HTML est différent du nom de la propriété JavaScript.

Answer 2

Vous devriez manipuler directement l'élément lors de l'application des classes, par exemple .:

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

sample.style.backgroundColor = '#ff25e1'; 

Fait intéressant, vous ne pouvez pas utiliser le mot « classe », car il est un mot réservé à JS.