javaScript classList API – идеальный способ добавления, удаления, переключения и проверки классов элемента в html5

javaScript classList API Наверное, каждый, кто хоть немного работал с JavaScript, думал о том, как упростить себе жизнь при работе с классами DOM элементов. Ну например у элемента есть 2-3 класса и вам нужно добавить еще один, проверить наличие какого-либо класса или удалить один из классов. Старый добрый element.className ну совсем неудобен для таких операций. Самое очевидное и удобное решение до сих пор было воспользоваться уже готовыми библиотеками типа jQuery, в которых есть методы addClass(), removeClass(), toggleClass() .. ну или изобрести велосипед и написать свой набор функций. Но вот, совсем недавно, с развитием HTML5, появился javaScript classList API. Он интуитивно понятен, очень прост, работает быстрее всевозможных библиотек и не требует дополнительного кода. То о чем вы мечтали! API уже давно рботает во всех нормальных браузерах и вот наконец-то (Алелуййа!!) поддерживается IE10-м, что по своему удивительно. По поводу IE 7-9 смотрите в конце статьи. Пример:

classList api Итак, что у нас есть в арсенале? Каждый HTML элемент содержит свойство

classList, которое представляет из себя объект, доступный для чтения.

JS

el.classList = 
{
    length: number, 
    add: function() {},
    contains: function() {},
    item: function() {},
    remove: function() {},
    toggle: function() {}
}

Как узнать сколько классов есть у элемента?

JS

el.classList.length;

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

JS

el.classList.add('myCssClass');

Как удалить один из классов элемента?

JS

el.classList.remove('myCssClass');

Как проверить, содержит ли элемент какой-либо класс?

JS

el.classList.contains('myCssClass'); // возвратит true/false

Как преключить класс (добавить, если его нет, или удалить, если он есть)?

JS

el.classList.toggle('myCssClass'); 

Как узнать индекс интересующего класса в наборе классов элемента?

JS

el.classList.item('myCssClass'); // возвратит индекс класса myCssClass

Подробнее о поддержке браузерами можно узнать здесь “Как же работать с IE 7-9 ?” – спросите Вы.. Не пререживайте, умные люди уже давно написали грамотный полифил который можно подключить только к старым IE, если есть необходимость с ними работать.

6 comments on “javaScript classList API – идеальный способ добавления, удаления, переключения и проверки классов элемента в html5
  1. drcreazy пишет:

    Интересно, в jquery используют это? Надо посмотреть как hasClass пашет

  2. nerv пишет:

    осталось им сделать переключение класса в зависимости от условия – добавить второй необязательный аргумент

    ** * @param {String} clazz 
    * @param {Boolean} [state] 
    */
    
    el.classList.toggle = function(clazz, state) { // code here };
    

    а пока приходится писать извраты вида

    el.classList[state ?'add':'remove'](class)
    
    • Каниет пишет:

      function toggleClassIfCondition(element, condition, className) {
      if (className) {
      if (condition === true) {
      element.classList.add(className);
      }
      else if (condition === false) {
      element.classList.remove(className);
      }
      else {
      element.classList.toggle(className);
      }
      else {
      console.log(‘You forgot to add class name’);
      }
      }

  3. Каниет пишет:

    Я просто оставлю это здесь, native js:

    if (document.body.classList.contains(‘thatClass’)) {
    // do some stuff
    }

    Добавление, удаление, переключение классов:

    document.body.classList.add(‘thisClass’);
    // $(‘body’).addClass(‘thisClass’);

    document.body.classList.remove(‘thatClass’);
    // $(‘body’).removeClass(‘thatClass’);

    document.body.classList.toggle(‘anotherClass’);
    // $(‘body’).toggleClass(‘anotherClass’);

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

*

* Copy This Password *

* Type Or Paste Password Here *

Проект создан в GanttPRO
Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by