访问现有 div 的 .classList答案

【问题标题】：Accessing .classList of an existing div访问现有 div 的 .classList
【发布时间】：2016-05-06 01:12:04
【问题描述】：

我似乎无法访问 HTMLDivElement 的 classList，这让我有些困惑。下面是相关的js代码...

    var thisDropTarget = document.getElementById(dropTargetId);
    console.log("document.getElementById(draggedId) = "+document.getElementById(draggedId));
    console.log("document.getElementById(draggedId).classList = "+document.getElementById(draggedId).classList);
    document.getElementById(draggedId).classList.remove("dragged");

第一个 console.log 说 document.getElementById(draggedId) 是一个 [object HTMLDivElement]。第二个 console.log 说对象的 classList 是未定义的。下一行抛出错误，说它是“无法获取未定义或空引用的属性'删除'”。

在其他地方，在 mousemove 处理程序中，我检查拖动的元素是否确实有一个类（它具有“拖动”类）。

任何想法为什么会发生这种情况？

【问题讨论】：

当然，我只是在询问后找到了解决方案。我一直在检查我的项目，从开发人员工具中模拟 IE8，当我将它测试为“边缘”时它可以工作。我猜 IE8 不支持 .classList - 对吗？
检查caniuse.com/#feat=classlistIE8和IE9不支持
你应该发布你的答案，以免别人不得不问同样的问题:)

标签： javascript css getelementbyid

【解决方案1】：

根据问题注意到的作者，问题是因为 IE 在 IE10 之前没有 classList 支持，即便如此，直到 Edge 更名 (caniuse) 才完全实现。

但是，如果您需要 GTE IE 8 中的 classList，则有一个相当不错的 polyfill (github)，它甚至嵌入在 the MDN page for classList 中。

或者，您可以自己编写一些辅助函数并手动实现您想要的classList 的部分，并通过检测加载“转发到实际classList 调用”版本而不是它是否可用。那是我个人走的路，因为我在工作中与美国的教育系统打交道，而学区因拥有古老的硬件而臭名昭著。如果真的不需要classList 的全部功能（即，您只使用它从className 添加/删除类），那么对用户机器的负担会少一些。下面提供了这些示例；请注意，您可能会稍微改进正则表达式。

$.setCls = function(ele, cls) {
    if (!$.hasCls(ele, cls)) ele.className += " " + cls;
};

$.rmCls = function(ele, cls) {
    ele.className = ele.className.replace(new RegExp("(^|\\s)" + cls + "(\\s|$)", "g"), "$2");
};

$.hasCls = function(ele, cls) {
    return ele.className.match("(^| )" + cls + "( |$)");
};

$.togCls = function(ele, cls) {
    if ($.hasCls(ele, cls)) {
        $.rmCls(ele, cls);
    } else {
        $.addCls(ele, cls);
    }
};

【讨论】：