Le code avec classList ne fonctionne pas dans IE ?

Question

J'utilise le code suivant, mais il échoue dans IE. Le message est le suivant :

Impossible d'obtenir la valeur de la propriété 'add' : l'objet est nul ou non défini".

Je suppose que c'est juste un problème de support d'IE. Comment faire pour que le code suivant fonctionne dans IE ?

Des idées ?

var img = new Image();
img.src = '/image/file.png';
img.title = 'this is a title';
img.classList.add("profilePic");
var div = document.createElement("div");
div.classList.add("picWindow");
div.appendChild(img);
content.appendChild(div);

Answer 1

Le site classList n'est pas prise en charge par IE9 et les versions inférieures. IE10+ la supporte cependant.
Utilisez className += " .." à la place. Note : N'omettez pas l'espace : les noms des classes doivent être ajoutés dans une liste séparée par des espaces.

var img = new Image();
img.src = '/image/file.png';
img.title = 'this is a title';
img.className += " profilePic"; // Add profilePic class to the image

var div = document.createElement("div");
div.className += " picWindow";  // Add picWindow class to the div
div.appendChild(img);
content.appendChild(div);

Answer 2

Comme mentionné par d'autres, classList n'est pas pris en charge par IE9 et les versions antérieures. En plus de l'alternative d'Alex ci-dessus, il y a quelques polyfills qui visent à être un remplacement immédiat, c'est-à-dire qu'il suffit de les inclure dans votre page et IE devrait fonctionner (derniers mots célèbres !).

https://github.com/eligrey/classList.js/blob/master/classList.js

https://gist.github.com/devongovett/1381839

Answer 3

classList est une fonctionnalité HTML5 et n'est pas prise en charge par tous les navigateurs.

J'utiliserais quelque chose comme jQuery ou YUI pour fournir la fonctionnalité d'ajout et de suppression de classes.

Answer 4

classList n'est pas pris en charge par IE. Utilisez jQuery.addClass ou quelque chose comme ça.

Answer 5

Si vous recherchez une solution jQuery, je pense que c'est ce qu'il vous faut :

var x = $('<div>').addClass('picWindow').append(
    $('<img>').attr({
            src: '/image/file.png',
            title: 'this is a title'
        }).addClass('profilePic')
    );

x doit être un div avec une image à l'intérieur. Vous en faites ce que vous voulez à ce stade.