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 and older don't support classList。在您使用jQuery标记问题时，您可以使用$.fn.addClass代替：

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

Answer 2

由于旧版浏览器不支持classList，您需要使用polyfill，或者在元素上使用jQuery的addClass方法，或者只使用普通的旧vanillaJS：< / p>

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非常适合这些任务！

＆＃13;

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(' ');
}

＆＃13;

<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>

＆＃13;

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

4 个答案: