带有classList的代码在IE中不起作用？

我正在使用下面的代码，但在IE中失败。 消息是：

无法获取“添加”属性的值：对象为空或未定义“

我认为这只是一个IE支持问题。 你将如何在IE中使下面的代码工作？

有任何想法吗？

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

classList属性不受IE9及更低版本的支持。 IE10 +支持它。
改为使用className += " .." 。 注意：不要忽略空格：类名应该添加在一个以空格分隔的列表中。

 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

正如所提到的， classList不支持IE9和更老的。 除了上面的Alex的替代scheme，还有几个polyfill，它们的目标是成为一个替代品，也就是说只要在你的页面中包含这些内容，IE就可以正常工作了（着名的遗言！）。

eligrey/classList.js/blob/master/classList.html

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

Answer 3

看一下这个

 Object.defineProperty(Element.prototype, 'classList', { get: function() { var self = this, bValue = self.className.split(" ") bValue.add = function (){ var b; for(i in arguments){ b = true; for (var j = 0; j<bValue.length;j++) if (bValue[j] == arguments[i]){ b = false break } if(b) self.className += (self.className?" ":"")+arguments[i] } } bValue.remove = function(){ self.className = "" for(i in arguments) for (var j = 0; j<bValue.length;j++) if(bValue[j] != arguments[i]) self.className += (self.className?" " :"")+bValue[j] } bValue.toggle = function(x){ var b; if(x){ self.className = "" b = false; for (var j = 0; j<bValue.length;j++) if(bValue[j] != x){ self.className += (self.className?" " :"")+bValue[j] b = false } else b = true if(!b) self.className += (self.className?" ":"")+x } else throw new TypeError("Failed to execute 'toggle': 1 argument required") return !b; } return bValue; }, enumerable: false }) 

和classList将工作！

 document.getElementsByTagName("div")[0].classList ["aclass"] document.getElementsByTagName("div")[0].classList.add("myclass") document.getElementsByTagName("div")[0].className "aclass myclass" 

就这样！

Answer 4

  /** * Method that checks whether cls is present in element object. * @param {Object} ele DOM element which needs to be checked * @param {Object} cls Classname is tested * @return {Boolean} True if cls is present, false otherwise. */ function hasClass(ele, cls) { return ele.getAttribute('class').indexOf(cls) > -1; } /** * Method that adds a class to given element. * @param {Object} ele DOM element where class needs to be added * @param {Object} cls Classname which is to be added * @return {null} nothing is returned. */ function addClass(ele, cls) { if (ele.classList) { ele.classList.add(cls); } else if (!hasClass(ele, cls)) { ele.setAttribute('class', ele.getAttribute('class') + ' ' + cls); } } /** * Method that does a check to ensure that class is removed from element. * @param {Object} ele DOM element where class needs to be removed * @param {Object} cls Classname which is to be removed * @return {null} Null nothing is returned. */ function removeClass(ele, cls) { if (ele.classList) { ele.classList.remove(cls); } else if (hasClass(ele, cls)) { ele.setAttribute('class', ele.getAttribute('class').replace(cls, ' ')); } } 

Answer 5

在IE <9中不支持classList 。使用jQuery.addClass或像https://developer.mozilla.org/en-US/docs/Web/API/Element/classList