舊版瀏覽器中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>