Подключение.список классов существующего div

Я немного озадачен тем, как я не могу получить доступ к списку классов HTMLDivElement. Вот соответствующий код 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");

Первая консоль.log говорит document.getElementById (draggedId) является [object HTMLDivElement]. Вторая консоль.log говорит, что список классов объекта не определен. Следующая строка выдает ошибку, говоря ,что»невозможно получить свойство ‘remove’ неопределенной или нулевой ссылки».

В другом месте, в обработчике mousemove, я проверяю, что у перетаскиваемого элемента действительно есть класс (у него есть’ перетаскиваемый ‘ класс).

Есть идеи, почему это может произойти?

1 ответ

  1. По словам автора вопроса, проблема заключалась в том, что у IE не было classListподдержки до IE10, и даже тогда она не была полностью реализована до ребрендинга Edge ( caniuse ).

    Однако, если вам нужен classList в GTE IE 8, есть довольно приличный полифилл ( github), который даже встроен в страницу MDN для classList .

    Кроме того, вы можете написать себе некоторые вспомогательные функции и реализовать частиclassList, которые вы хотите вручную, с обнаружением, которое загружает версию «вперед к фактическому classListвызову» вместо этого, если она будет доступна. Это путь, по которому я лично пошел, так как я имею дело с системой образования США на работе, и школьные округа известны тем, что имеют древнее оборудование. Это немного меньше налогов на машину пользователя, если полная мощность classListдействительно не нужна (т. е. вы используете ее только для добавления/удаления классов className). Пример из них приведен ниже; обратите внимание, что вы, вероятно, могли бы улучшить regex a smidge.

    $.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"), "");
    };
    
    $.hasCls = function(ele, cls) {
        return ele.className.match("(^| )" + cls + "( |$)");
    };
    
    $.togCls = function(ele, cls) {
        if ($.hasCls(ele, cls)) {
            $.rmCls(ele, cls);
        } else {
            $.addCls(ele, cls);
        }
    };