На этом уроке мы рассмотрим свойство classList, которое предназначено для работы с классами элемента (узла). С помощью его Вы можете не только получить значение атрибута class у элемента, но и добавить к нему новые классы или удалить у него существующие.

Работа с классами элемента (узла) с помощью методов getAttribute(), setAttribute() и removeAttribute() представляется затруднительной, когда например Вам необходимо добавить, переключить или удалить какой-то один определённый класс у элемента. Данные методы позволяют работать со значением атрибута class только целиком и не позволяют управлять его отдельными классами.

Для того чтобы управлять отдельными классами элемента необходимо использовать свойство classList. Данное свойство представляет значение атрибута class в виде объекта DOMTokenList. Само свойство classList доступно только для чтения, а управление классом (классами) элемента осуществляется с помощью методов объекта DOMTokenList.

Свойство classList (объект DOMTokenList) не поддерживается в браузерах Internet Explorer 8, 9 и Opera Mini.

JavaScript - свойство classList

//получить список классов в виде DOMTokenList
var myID = document.getElementById("myID").classList
//получить значение атрибута class в виде строки
myID.toString()
//получить количество классов у элемента
myID.length
//получить имя первого класса в списке
myID.item(0)
//получить имя второго класса в списке
myID.item(1)

Объект DOMTokenList имеет свойство length, которое возвращает количество классов в списке. Данное свойство доступно только для чтения.

  • add(class1,class2,...) - добавляет один или несколько к элементу классов. Если указанный класс уже есть у элемента, то он не будет добавлен.

  • contains(class) - возвращает true или false в зависимости от того имеет ли элемент указанный класс.

  • item(index) - возвращает имя класса по его индексу из коллекции DOMTokenList. Отсчёт элементов (классов) в коллекции начинают с 0. Если Вы в качестве параметра метода item() указали индекс несуществующего класса (т.е. индекс находится вне диапазона), то данный метод вернёт Вам в качестве результата значение null.

  • remove(classl,class2,...) - удаляет один или несколько указанных у элемента классов. Если Вы указали класс, который не существует у элемента, то это не приведёт к ошибке в работе метода.

  • toggle(class,true|false) - переключает указанное имя класса у элемента. Метод toggle имеет 2 параметра: class (обязательный) - указывается имя класса, который надо переключить; true|false (необязательный) - логическое значение, которое принудительно заставляет включить или выключить указанный класс у элемента.

    При использовании метода toogle с одним параметром, он переключает класс. Т.е. если данный класс есть у элемента, то он его удаляет, а если данного класса нет у элемента, то он его добавляет.

    При использовании метода toogle с 2 параметрами, он переключает класс в зависимости от значения 2 параметра. Если 2 параметр имеет значение true, то данный метод добавляет класс к элементу. А если 2 параметр имеет значение false, то данный метод удаляет указанный класс у элемента.

    При использовании метода toogle необходимо иметь в виду то, что второй параметр не поддерживается в Internet Explorer 10 и 11.

    Например, переключить класс hidden-xs у элемента, который имеет id="sidebar":

    var sideBar = document.getElementById("sidebar");
    sideBar.classList.toogle("hidden-xs");
    

    Например, добавить несколько классов к элементу с id="myID":

    var myID = document.getElementById("myID");
    myID.classList.add("col-xs-6","col-sm-4","col-md-3");
    

    Например, удалить класс hidden-xs у элемента с id="myID":

    var myID = document.getElementById("myID");
    myID.classList.remove("hidden-xs");
    

    Например, получить имя первого класса у элемента с id="myID":

    var myID = document.getElementById("myID");
    myID.classList.item(0);
    

    Например, определить имеет ли элемент класс hidden-lg и если имеет, то удалить его:

    var myID = document.getElementById("myID");
    if (myID.classList.contains("hidden-lg") {
      myID.classList.remove("hidden-lg");
    }
    else {
      console.log("Данный класс не найден!");
    }
    

    Написать код на языке JavaScript, используя объект DOMTokenList, для переключения классов sizeText, colorText и backgroundColorText у элемента, имеющего атрибут id со значением "text". Переключение классов производить при нажатии на следующие кнопки: "Изменить размер шрифта", "Изменить цвет шрифта" и "Изменить цвет заднего фона".

    <!--СSS-->
    <style> 
      .sizeText { font-size: 40px; }
      .colorText { color: red; }
      .backgroundColorText { background: yellow; }
    </style>
    <!--HTML-->
    <p id="text">Некоторый текст</p>
    <input id="sizeText" type="button" value="Изменить размер шрифта"></input>
    <input id="colorText" type="button" value="Изменить цвет шрифта"></input>
    <input id="backgroundColorText" type="button" value="Изменить цвет заднего фона"></input>