JavaScript - DOM: управление атрибутом class

На этом уроке мы рассмотрим свойство 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>
    


   JavaScript и jQuery 0    1914 0

Комментарии (8)

  1. Maksim # 0
    Добрый день, Александр.

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

    Вариант 1
    <script>
    $('#MyButton').click(function(){
            $('#myWindow').attr('class', 'visible');
    });
    </script>
    

    Вариант 2
    <script>
    $('#MyButton').click(function(){
            $('#myWindow).removeClass('hidden');
    });
    </script>  
    Оба варианта работают на всех платформах, кроме браузера Safari. В чем может быть причина?
    1. Александр Мальцев # 0
      Здравствуйте!
      Вы используете не чистый JavaScript, а библиотеку jQuery.

      На странице поддержки различных браузеров библиотеками jQuery 1.x и 2.x сказано, что данные версии библиотек поддерживают браузер Safari, начиная с версии 5.1.
      Если данное условие у Вас выполняется, то попробуйте использовать самую последнюю версию библиотеки jQuery (1.11.3 или 2.1.4).
      Если Вам и это не поможет, то попробуйте вместо $ использовать jQuery:
      <script>
      jQuery('#MyButton').click(function(){
        jQuery('#myWindow').attr('class', 'visible');
      });
      </script>
      
      1. Maksim # 0
        Спасибо за информацию. пока не сработало, но в каком направлении искать — понял. будут искать.
        и ещё вопрос попутно, как сделать, чтобы при повторном нажатии на ту же кнопку class менялся обратно?
        1. Александр Мальцев # 0
          В jQuery есть метод .toggleClass(имя_класса). Данный метод переключает указанный класс у элемента. Т.е. если у элемента данного класса нет, то он добавляется. А если указанный класс есть, то он удаляется.
          $('#idElement').toggleClass('visible');
          
          А если Вы заменили класс, а потом Вам его надо вернуть обратно, то здесь только вручную.
          Т.е. сначала сохраняете значение класса в переменную:
          // сохранить значение класса в переменную
          var previousClass = $("#idElement").attr("class");
          
          А потом восстанавливаете значение класса из переменной:
          //восстановить значение класса из переменной
          $("#idElement").attr("class",previousClass);
          
          1. Maksim # 0
            Спасибо Александр!
            1. Maksim # 0
              с восстановлением переменной не осилил, смену атрибута пришлось делать по-другому:
              <script>
              $('#eye').click(function(){
               if ($('#CurrentPass').get(0).type=='password') $('#CurrentPass').get(0).type='text'; 
              else $('#CurrentPass').get(0).type='password';
              });    
              </script> 
              
      2. Карим Азиев # 0
        Я так понимаю, для решения последней задачи нужно использовать click? Но разве он был в предыдущих уроках?
        1. Александр Мальцев # 0
          Да, есть такой недочёт. Чтобы не использовать события, эти действия можно выполнить, например, используя консоль браузера.

        Вы должны авторизоваться, чтобы оставлять комментарии.