旧版浏览器中classList`undefined`的解决方法？

Question

以下代码可在所有现代浏览器中使用，但在旧版浏览器上会引发错误。 我该如何解决？

错误：

TypeError: Result of expression 'document.getElementById("profile").classList' [undefined] is not an object.

码：

document.getElementById("mixdesign").addEventListener("webkitAnimationEnd",    design);

function design(){
  "use strict";
  document.getElementById("profile").classList.add("animation");
  location.href = "#profile"; 
} 

参见小提琴： https ： //jsfiddle.net/mm0o5jhw/3/

Answer 1

IE9和更早的版本不支持classList 。 用jQuery标记问题后，可以改用$.fn.addClass ：

$("#profile").addClass("animation") 。

Answer 2

由于较旧的浏览器不支持classList因此您需要使用polyfill或在元素上使用jQuery的addClass方法，或者仅使用普通的旧vanillaJS：

document.getElementById("profile").className += " animation";

Answer 3

使用classList是一种方便的替代方法，它可以通过element.className以空格分隔的字符串访问元素的类列表。

仅在IE10及更高版本中退出

String.prototype.trim = String.prototype.trim || function () {
   return this.replace(/^\s+|\s+$/g, "");
};

 function getClassList(elem) {
     var trimmedClasses = elem.getAttribute("class").trim();

      return trimmedClasses ? trimmedClasses.split(/\s+/) : [];
 }

 function addClass(elem, c) {
     var classes = getClassList(elem);

     classes.push(c);

     elem.className = classes.join(" ");
 }

这是一个幼稚的实现，您可以在mdn中使用更强大的解决方案

Answer 4

Element.classList Api从IE10开始。

对于跨浏览器支持，您必须使用Element.className 。

区别在于classList是一个数组，具有添加和删除方法，className是一个简单的字符串...

您已使用jQuery标记了问题，jQuery非常适合这些任务！

 function addClass() { var newClass = document.getElementById('baz').value || 'not-filled'; var classes = document.getElementById('foo').className.split(' '); classes.push(newClass) return document.getElementById('foo').className = classes.join(' '); } 

 <div id="foo" class="class1 class2 class3 classN"></div> <div style="padding: 1em;"> <input type="text" id="baz" /> <button onclick="addClass()">Add Class</button> </div>