Почему не работает classlist add

Element.classList

Описание

Свойство classList возвращает псевдомассив DOMTokenList , содержащий все классы элемента.

У classList есть примитивная альтернатива — свойство className, которое содержит значение атрибута class элемента.

Синтаксис

• Результат — псевдомассив DOMTokenList , содержащий все классы узла elem

Методы

ClassList является геттером. Возвращаемый им объект имеет несколько методов:

add( String [,String] ) Добавляет элементу указанные классы remove( String [,String] ) Удаляет у элемента указанные классы item ( Number )
Результат аналогичен вызову сlassList[Number] toggle ( String [, Boolean])
Если класс у элемента отсутствует — добавляет, иначе — убирает. Когда вторым параметром передано false — удаляет указанный класс, а если true — добавляет. Если вторым параметром передан undefined или переменная с typeof == ‘undefined’, поведение будет аналогичным передаче только первого параметра при вызове toggle. contains ( String )
Проверяет, есть ли данный класс у элемента (вернёт true или false)

И, конечно же, у ClassList есть заветное свойство length, которое возвращает количество классов у элемента.

Источник

classList.add Не Работает

Я пытаюсь сделать простой список to-do, используя JavaScript. В принципе, вы вводите элемент в поле ввода, он добавляется в список, вы нажимаете на него, если он завершен, а затем он пересекается. Если вы нажмете на список, который уже зачеркнут, то эта строка будет удалена. Но в то время как удаление линии работает, добавление сквозной линии не работает.

2 ответа

У меня возникла проблема с функцией classList.add javascript. Я пытаюсь добавить класс active к элементам и применить стиль css для этих активных классов. Тем не менее, это, кажется, не работает, и я с трудом справляюсь с этим. Может ли кто-нибудь помочь мне в этом вопросе? Ниже приведена текущая.

Вы можете просто использовать метод toggle classList , чтобы поменять местами классы li s. Просто выберите все ваши li и установите их обработчик событий click в функцию, которая переключает классы.

Скрипт анализирует документ только один раз, и document.querySelector(«li.completed.selected») возвращает узел. Поэтому удаление этих классов работает только для одной задачи , которая имеет эти классы к моменту анализа сценария.

вам нужно добавить обработчик onclick вручную к каждому созданному элементу, см. jsFiddle .

Похожие вопросы:

Я играю с .classList и получаю некоторые странные ошибки в своей консоли. Вот моя демо -версия В принципе, у меня есть массив изображений с классом child, и я делаю javascrpt .querySelectorAll .

Просто почти закончите проект, и эта простая линия не позволит мне. mykey= document.getElementById(‘mykey’), mykey.onclick = function() ; По щелчку.

У меня возникла проблема с функцией classList.add javascript. Я пытаюсь добавить класс active к элементам и применить стиль css для этих активных классов. Тем не менее, это, кажется, не работает, и.

Я попытался вставить панель социальных акций моего сайта на прокрутку в соответствии с учебником здесь . Ссылка на мой сайт.

Я пытаюсь сделать цикл, который изменяет класс элемента каждый раз, когда он выполняется. Проблема в том, что classList.add(‘something’) требуется строка, и мне нужно поместить туда переменную, вот.

Я пытаюсь создать динамический календарь. Мой первый шаг — добавить классы к определенным элементам по щелчку мыши, но по пути я столкнулся с проблемой: classList.add(); не работает в HTML.

Эй, я должен дать некоторым элементам списка свои собственные классы. Но мой способ сделать это немного чересчур. Есть ли способ сделать это чище с помощью петли или чего-то в этом роде? Javascript.

Источник

Добавляем и удаляем CSS-классы при помощи Javascript

В этой статье мы расскажем о двух способах манипуляции с HTML class . В первом используется Javascript-свойство classList , а во втором задействуется библиотека jQuery . Для начала, взгляните на следующий код:

В нем представлена кнопка с событием onclick , которое позволяет переключать цвет кнопки. CSS-код определяет классы для установки цвета фона:

Единственное, что здесь остается сделать, это реализовать функцию toggleColor() :

classList

У каждого элемента есть свойство classList , которое содержит в себе атрибуты HTML style class . Это свойство включает в себя методы, позволяющие добавлять или удалять классы:

В приведенном выше примере используется три метода classList .

• contains() – возвращает значение true , если у элемента имеется родительский класс. Если же его нет, то возвращается значение false ;
• add() – добавляет заданный класс к элементу. Это действие игнорируется, если элемент уже содержит заданный класс;
• Remove() — заданный класс, при его наличии, удаляется.

Эту задачу можно решить проще при помощи метода toggle() , который добавляет указанный атрибут class в HTML при его отсутствии, или удаляет его, если он уже применен:

При работе с несколькими классами их можно разделять запятыми:

Единственный недостаток данного подхода заключается в том, что он был представлен лишь в HTML5 , и не факт, что он будет хорошо поддерживаться устаревшими браузерами.

JQuery

jQuery предлагает методы, которые работают по тому же принципу. Но также позволяют использовать укороченные свойства для выделения элементов. Давайте посмотрим, как функция toggleColor() должна быть написана на jQuery :

Можно использовать addClass() , removeClass() и hasClass() для toggleColor() . Обратите внимание, что новые HTML style class можно перечислять через пробел в той же строке.

На этом все! Теперь вы знаете, как без труда изменять внешний вид DOM-элементов !

Пожалуйста, оставляйте свои отзывы по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, отклики, дизлайки, лайки, подписки!

Пожалуйста, оставляйте ваши отзывы по текущей теме материала. За комментарии, лайки, дизлайки, отклики, подписки низкий вам поклон!

Источник

«Не удается прочитать свойство ‘classList’ из null» при использовании classList.add

У меня есть эта ошибка, но так как я не знаком с кодом. Это произошло из темы в startbootstrap (Creative). Файл есть

ошибка в том, что:

Я не знаком с написанным кодом. Я включаю этот файл вместе с другими JS-файлами. И похоже, что другой JS-файл нуждается в переменной classie .

ВОТ ОШИБКА В КОНСОЛИ:

ALSO, у меня ошибка в bootstrap.js.

Нужна помощь. Спасибо.

3 ответа

Я новичок в angular2. Я скачал проект angular 2 и попытался его настроить. Я установил angular cli 1.0.0-rc.2, и когда я делаю ng serve, он показывает следующую ошибку: Не удается прочитать свойство ‘config’ из null TypeError: не удается прочитать свойство ‘config’ из null в Class.run.

У меня есть функция стрелки addEventListener, где при нажатии кнопки она меняет цвет, переключая класс. это выглядит как ниже: var clickButton = document.getElementById(clicker); clickButton.addEventListener(click, => () < this.classList.toggle(modified); >, false); В моей консоли: Uncaught.

Сегодня я столкнулся с той же проблемой, но на другую тему, и хотел опубликовать свою резолюцию, чтобы помочь другим в будущем.

Проблема в файле cbpAnimatedHeader.js. Этот файл определяет функцию «scrollPage», которая вызывает функцию «classie». Вот почему вы изначально видите, что ошибка связана с файлом classie.js. В функции scrollPage используется переменная «header»:

Однако заголовок не определяется таким образом, чтобы функция scrollPage могла его прочитать. Чтобы исправить ошибку, вы можете либо определить заголовок глобально, либо в функции scrollPage. Я решил просто скопировать определение переменной в функцию. Вот окончательный результат в cbpAnimatedHeader.js :

Я понял, что моя проблема заключалась в том, что я переместил файл cbpAnimatedHeader.js из нижней части тела в голову. Из-за этого заголовок был null, потому что html еще не был отрисован.

Вместо того, чтобы добавлять поиск по заголовку в функцию scrollPage, я завернул все это в готовый документ jQuery.

Добавляя свое решение сюда, я получал точно такую же ошибку, но это не имело никакого отношения к фактическому плагину Classie.

Я использовал скрипт отсюда, чтобы уменьшить верхнее меню на моем сайте при прокрутке: http://callmenick.com/post/animated-resizing-header-on-scroll .

Я добавил на страницу дополнительные элементы, которые требовали добавления к ним класса .smaller , так как они также перемещались вверх и уменьшались при прокрутке, чтобы перейти к меньшему меню. Я также добавлял адаптивные элементы, которые были NOT всегда определены на данной странице. В этом и заключалась проблема, я пытался использовать функцию addClass в Classie на некоторых адаптивных элементах, которые на самом деле не существовали при прокрутке, поэтому при каждом прокручивании страницы она выдавала несколько таких ошибок.

Поэтому я реализовал проверку, чтобы убедиться, что адаптивные элементы существуют, прежде чем пытаться добавить к ним класс .smaller .

вот мой код. constructor(private loginService: LoginService, private router: Router, private renderer: Renderer) < >@ViewChild(‘element’) private element: ElementRef; this.renderer.setElementClass(this.element, ‘shake’, false); это приводит к тому, что не удается прочитать свойство ‘classList’.

Я использую innerHTML, чтобы добавить некоторые элементы и обертку поверх него for (i = 0; i

Похожие вопросы:

Я пытаюсь использовать эту библиотеку организационных диаграмм по адресу http: / / www.getorgchart.com С несколькими узлами работает безупречно, однако, когда я пытаюсь загрузить всю организацию.

Я пытаюсь сделать простой слайдер, но у меня есть такая проблема: Uncaught TypeError: Cannot read property ‘classList’ of undefined Это мой код.: var div = document.querySelectorAll(div); for(var i.

когда я запускаю эту команду ng serve,у меня есть эта ошибка, может ли кто-нибудь сказать мне, почему Не удается прочитать свойство ‘config’ из null TypeError: не удается прочитать свойство ‘config’.

Я новичок в angular2. Я скачал проект angular 2 и попытался его настроить. Я установил angular cli 1.0.0-rc.2, и когда я делаю ng serve, он показывает следующую ошибку: Не удается прочитать свойство.

У меня есть функция стрелки addEventListener, где при нажатии кнопки она меняет цвет, переключая класс. это выглядит как ниже: var clickButton = document.getElementById(clicker);.

вот мой код. constructor(private loginService: LoginService, private router: Router, private renderer: Renderer) < >@ViewChild(‘element’) private element: ElementRef;.

Я использую innerHTML, чтобы добавить некоторые элементы и обертку поверх него for (i = 0; i

Источник

Есть ли способ добавить / удалить несколько классов в одной инструкции с classList?

Пока я должен сделать это:

Хотя это возможно в jQuery, вот так

Я хотел бы знать, есть ли какой-либо родной способ добавить или удалить.

13 ответов

Чтобы добавить класс к элементу

Стандартное определение позволяет только добавлять или удалять один класс. Пара небольших функций-оболочек может сделать то, что вы просите:

Эти оболочки позволяют указывать список классов как отдельные аргументы, как строки с пробелами или разделенными запятыми элементами, или их комбинации. Пример см. В http://jsfiddle.net/jstoolsmith/eCqy7.

Свойство classList гарантирует, что повторяющиеся классы не будут добавлены в элемент без необходимости. Чтобы сохранить эту функциональность, если вам не нравятся рукописные версии или версия jQuery, я бы предложил добавить функцию addMany и removeMany в DOMTokenList (тип classList ) :

Затем они могут быть использованы так:

Обновить

Согласно вашим комментариям, если вы хотите написать собственный метод для них только в том случае, если они не определены, попробуйте следующее:

Очень простое, не причудливое, но работающее решение, в которое я должен верить, очень кросс-браузерное

Создать эту функцию

Назовите это так: removeAddClasses (node.classList, arrayToRemove, arrayToAdd);

. где arrayToRemove — это массив имен классов, которые нужно удалить: [‘myClass1’, ‘myClass2’] etcetera

. и arrayToAdd — это массив имен классов, которые нужно добавить: [‘myClass3’, ‘myClass4’] etcetera

Более новые версии спецификации DOMTokenList допускают множественные аргументы для add() и < >, а также второй аргумент для toggle() для принудительного вызова состояния.

На момент написания Chrome поддерживает несколько аргументов для add() и remove() , но ни один из других браузеров этого не делает. IE 10 и ниже, Firefox 23 и ниже, Chrome 23 и ниже и другие браузеры не поддерживают второй аргумент toggle() .

Я написал следующий небольшой polyfill, чтобы прикрыть меня, пока поддержка не расширится:

Ожидается современный браузер с ES5-совместимостью и DOMTokenList , но я использую это заполнение в нескольких специально предназначенных средах, поэтому он отлично работает для меня, но может потребоваться настройка сценариев, которые будут работать в устаревших браузерных средах, таких как как IE 8 и ниже.

Предположим, что у вас есть массив классов для добавления, вы можете использовать синтаксис ES6:

let classes = [‘first’, ‘second’, ‘third’]; elem.classList.add(. classes);

Вы можете сделать как показано ниже

Удалить

TL; DR;

В прямом случае выше удаление должно работать. Но в случае удаления, вы должны убедиться, что класс существует, прежде чем удалить их

Вот обходной путь для пользователей IE 10 и 11, который казался довольно простым.

Источник