classList html5 эмулятор


Содержание

Управление HTML5-плеером с помощью JavaScript

Веб-программирование — HTML5 — Управление HTML5-плеером с помощью JavaScript

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

Создание своего видеопроигрывателя

Любому видеопроигрывателю требуется базовый набор кнопок управления воспроизведением. Стандартные кнопки управления воспроизведением проигрывателя создаются следующим кодом:

Функции других кнопок управления воспроизведением не совсем стандартные — они используются для регулирования скорости воспроизведения путем значения свойства playbackRate. Например, при значении playbackRate равным 2 видео проигрывается вдвое быстрее нормальной скорости, но с откорректированной высотой тона, вследствие чего звук воспроизводится нормально, только вдвое быстрее.

Это замечательная возможность для ускоренного просмотра медленных видеоинструкций. Аналогично, при значении playbackRate равном 0.5 видео проигрывается со скоростью, составляющей половину нормальной скорости. При значении playbackRate равном -1 видео должно проигрываться с нормальной скоростью, только в обратном направлении, но браузеры сталкиваются с проблемой реализации этого режима должным образом. Код для реализации этих функций следующий:

Задача создания индикатора хода воспроизведения представляет несколько больший интерес. В отношении разметки он создается из двух элементов

Индикатор хода воспроизведения является примером ситуации, идеально подходящей для использования элемента

. Но уровень браузерной поддержки элемента

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

Далее приведены правила таблицы стилей, которые устанавливают размер индикаторов и окрашивают их в соответствующие цвета:

В процессе воспроизведения элемент постоянно активирует событие onTimeUpdate. Реагируя на это событие, обновляем индикатор хода воспроизведения:

А этот код получает от свойства currentTime значение текущей позиции в видео, разделяет его на общее время (свойство duration) и преобразует результат в процентное значение, которое используется для установления размера div-элемента postitionBar:

Можно сделать индикатор выполнения немного замысловатей, добавив индикатор загрузки, показывающий объем содержимого, загруженного и помещенного в буфер в данный момент. Эта возможность уже имеется в проигрывателях, встроенных в браузеры. Чтобы добавить этот индикатор, нужно обрабатывать событие onProgress и работать со свойством seekable. Дополнительную информацию о свойствах, методах и событиях элемента смотрите на странице msdn.microsoft.com/ru-ru/library/ff975073.aspx.

Проигрыватели на JavaScript

Если вы не хотите ни от кого зависеть в своей работе, то можете создать свой аудио- или видеопроигрыватель с чистого листа. Но это будет очень трудоемким проектом, особенно если вы хотите обеспечить разные вычурные возможности, наподобие интерактивного списка воспроизведения. К тому же, если за вашей спиной нет небольшого дизайнерского отдела, то существует отчетливая вероятность, что конечный продукт ваших усилий будет иметь слегка уродливый внешний вид (как показано выше ;).

К счастью, для веб-дизайнеров, блуждающих в поисках идеального HTML5-проигрывателя, имеется лучший вариант. Вместо того чтобы разрабатывать мультимедийный проигрыватель самому, можно взять бесплатный, настраиваемый посредством JavaScript проигрыватель в Интернете. Два из них — это VideoJS и, для фанатов библиотеки jQuery — jPlayer. Оба проигрывателя легковесные, удобны в использовании, а также имеют функцию смены скинов с помощью таблицы стилей. Например сервис VideoJS позволяет создать вручную скин медиаплеера:

Большинство проигрывателей мультимедиа на JavaScript (включая проигрыватели VideoJS и jPlayer) содержат встроенные резервные решения Flash, что позволяет разработчику сэкономить время и усилия на поиски отдельного Flash-проигрывателя. А проигрыватель jPlayer имеет удобную функцию создания списка воспроизведения, позволяющего выбрать для проигрывания или просмотра несколько файлов.

Чтобы использовать VideoJS в своих разработках, сначала загрузите его JavaScript-файлы с веб-сайта проигрывателя. Потом вставьте ссылку на его сценарий и таблицы стилей, как показано в следующем коде:

Затем используется обычный элемент с несколькими элементами и резервным решением Flash. (Для резервного Flash-решения в проигрывателе VideoJS используется Flowplayer, но его можно удалить и использовать другой Flash-проигрыватель.) По сути, единственная разница между обычной страницей HTML5 и страницей с проигрывателем VideoJS состоит в том, что в последней нужно использовать специальный класс в элементе :

How to manipulate classes without jQuery by using HTML5’s classList API

As a front end developer, you often need to change CSS rules based on how a user interacts with elements on a page.

In the past, I relied on jQuery to handle these kinds of DOM manipulations for me. But in some cases, it doesn’t make sense to import the whole jQuery library, just so you can perform some basic DOM manipulation.

Luckily, HTML5 offers a way to do this natively, without the need for jQuery.

How I discovered HTML5’s classList method

A few days ago, I was reading some code. I noticed that one project included jQuery as a dependency, just so they could add and remove classes when the user clicked a button on the page. The entire interaction code was only 11 lines of code.

I thought it was weird they were doing it this way. It was the equivalent of using a bazooka (jQuery) to kill a mosquito (adding and removing classes upon a click).

The code in question

It occurred to me that I’d probably done similar things in my previous coding projects. So I decided to try to replicate the same functionality using plain JavaScript and see what I can learn from that.


A quick search turned up several options for doing this in plain JavaScript. I went with the classList method because it’s easy to understand and cross-browser support is quite good.

According to Can I Use, classList works everywhere except Opera Mini and Internet Explorer 8.

Note that if you need to support Internet Explorer versions older than IE 11, you may need to find an alternative method or use a polyfill.

If you’re wholly reliant on using jQuery for DOM handling, this is a great place to start gaining some independence from jQuery.

What is the classList API?

The HTML5 classList API provides a way to grab all the classes associated with an element so that you can use JavaScript to modify them.

Using the classList DOM property on an element will return a DOMTokenList. This contains all the classes applied to an element, and the length property, which signifies the total number of classes on that element.

Take a look at this example:

You can try the above in your browser to see it in action.

Getting the classes of an element is all well and good, but it isn’t all that useful on its own. We need a way to manage and update those classes. The classList property provides a few methods that do just that:

  • add(): Adds specified classes
  • remove(): Removes specified classes
  • contains(): Checks whether the specified class exists on the element
  • toggle(): toggles specified class
  • index(): returns the class at a specified position in the list
  • length: returns the number of classes

Let’s take a look at each one in turn.

Adding classes

Adding a class to an element is straightforward. Just apply the class name as an argument to the add() method. Note that if the class name already exists on the element, it won’t be added again.

Илон Маск рекомендует:  Поиск по сайту нет ничего проще (настройка cnsearch)

To add multiple classes, separate each class with a comma:

Removing classes

To remove a class, all you need to do is pass the class name as an argument to the remove() method. If the class name doesn’t already exist in the classList, an error is thrown.

To remove multiple classes, separate each class with a comma:

Check whether a class exists

Using the contains() method, we can check whether a specified class is present in an element’s classList and perform operations based on the return value.

Toggling Classes

Adding or removing a class based on user action is a common thing to do. This was exactly what I wanted to achieve with classList.

You can toggle between adding and removing using the toggle() method.

Here’s what I eventually did:

Check the number of classes

To find out how many classes are applied to an element, use the length property:

Wrapping up

As you can see, the classList API is easy to use. I encourage you to begin exploring its capabilities in your own applications.


Also, leave a comment if you have any questions, or reach out to me on Twitter. For more articles like this one, check out my blog. Thanks for reading!

If this article was helpful, tweet it or share it.

Добавляем и удаляем 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-элементов !

Данная публикация представляет собой перевод статьи « How to Add/Remove CSS classes using JavaScript » , подготовленной дружной командой проекта Интернет-технологии.ру

chaining HTML5 > Ask Question

Is there a way to chain HTML5 classList API chaining?.

this will not work

while this will work

NOTE: NO jquery please

3 Answers 3

You can create chainability via a little object with chainable methods:

Then you can chain to your heart’s content:

For chaining to work, a method has to return the object that you want to chain with. Because .classList methods do not return either the classList object or the DOM object, you can’t natively do chaining with them.

You could, of course write your own methods and have them return the appropriate object and thus re-implement the functionality in a chainable way, but you’d have to put them on a system prototype in order to be able to use them as easily.


Without reimplementing chainable methods, you could shorten your code a bit:

If you want to add chainable methods on the actual HTML5 objects, you could do this:

Or, if you want a .classList type interface, you could do this:

FYI, because both of these options chain the actual DOM element (unlike torazaburo’s method which chains a custom object), you can add a DOM element method/property at the end as in:

Or, you can do something like this:

If you only support modern browsers, chaining is one of the rare advantages jQuery still holds against vanilla JavaScript, but this shouldn’t stop you. Like @jfriend00 suggested above, you can create your own add/remove/toggle methods that can be chained by simply returning the this object.

In your case you would then apply them like so:

A note about naming. I would suggest against simply using addClass and removeClass because those could conflict with jQuery’s own methods, or someone reading the code would mistake them for jQuery’s methods. Here I added a C which stands for Chaining, but you can name it something more meaningful to you.

Edit: I added a check to make sure our methods were not already defined earlier in order to avoid overriding. I also switched the class variable name from cssClass to htmlClass because that’s more correct (html has classes, css has selectors).

8 бесплатных HTML5 аудио/видео плееров для разработчика

С каждым днем мы все больше и больше слышим о HTML5. По мнению экспертов HTML5 — это будущее Интернета. В HTML5 есть очень интересные функции, например воспроизведение аудио-видео роликов. Предлагаю вашему вниманию краткий обзор семи бесплатных HTML5 видео плееров для разработчиков.

1. MediaelEment.js

2. jPlayer

Это jQuery плагин для проигрывания аудио и видео. Поддержка форматов: mp3, m4a (AAC), m4v (H.264), ogv, oga, wav, webm.

3. MediaFront

Открытая бесплатная платформа (лицензия GPLv3) для внедрения плеера в веб-страницу, использует все новороты HTML5. Внедрение роликов с YouTube, Vimeo. Темы основаны на jQuery-UI ThemeRoller

4. JME

jme — это HTML5 аудио/видео компонент с Flash и VLC Fallback, который сфокусирован на гибком интуитивно понятном DOM-API и семантичном коде.

5. FlareVideo

Flare — бесплатный HTML 5 видео плеер. Темы основаны на CSS/HTML/JS. Полностью открытый исходный код. Бесплатен для коммерческого использования.

6. Projekktor

Projekktor обертка для новых HTML5 аудио и видео элементов. Прост в интеграции (всего один JavaScript файл). Кроссбраузерный (IE, Opera, Chrome, Safari, Firefox и другие). Поддерживает внедрение рекламы в проигрываемый ролик. Использует свободный видеокодек Theora. Есть плейлисты. Показ роликов с YouTube. Темы основаны на HTML/CSS. Бесплатен для некоммерческого и коммерческого использования (лицензия GNU GPL)

7. Video JS

HTML5 видео плеер. Использует современные возможности браузеров. Бесплатен. Исходный код открыт. Легковесный. Не использует картинок. Скины задаются через CSS. Есть полноэкранный режим. В старых браузерах плеер автоматически заменяется на Flowplayer. Лицензия MIT.

Frontender Magazine

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

Дело в том, что речь пойдет об удивительно простом classList API. Если вы не слишком хорошо владеете Javascript-фу и опасаетесь HTML5 API, этот API идеально подходит для начала, и вы приятно удивитесь, насколько просто его использовать.

Название classList API говорит само за себя. Он получает список классов для элемента HTML и позволяет управлять им с помощью JavaScript.

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


Получаем classList

Получить classList можно очень просто, используя element.classList :

В консоли мы увидим нечто вроде [«oh», «my», «giddy», «aunt»] . Оформление выведенного результата будет отличаться в зависимости от браузера, однако по сути мы получим объект со списком классов для элемента.

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

Для classList нет спецификации как таковой (о нём есть предложение в спецификации DOM4), однако есть спецификация для DOMTokenList , который является типом classList , так что за информацией о работе со списками классов обратитесь к спецификации DOMTokenList .

Тип classList

Если вам нужны доказательства, введите в консоли
element.classList instanceof DOMTokenList , и вы получите true . typeof element.classList вернет object , что не слишком-то информативно, если учитывать, что в JavaScript всё является объектом.

Использование списка классов

В спецификации DOMTokenList перечислен ряд методов, которые могут быть использованы для classList :

  • add() для добавления класса в список
  • remove() для удаления класса из списка
  • contains() для проверки наличия класса в списке
  • toggle() для переключения класса — добавления при отсутствии в списке и удаления при наличии (с некоторыми особенностями)
  • item() для получения класса по его индексу в списке
  • toString() для превращения списка в строку
  • length для получения количества классов в списке
  • value для добавления дополнительных свойств и методов для объекта classList
Илон Маск рекомендует:  Что такое код dbplus_getunique

classList.add()

Более лёгкий способ добавить класс для элемента и не придумаешь. Просто задаем нужный класс в качестве аргумента для метода add() .

Откройте демо и посмотрите на открывающий тег

в вашем любимом веб-инспекторе до и после нажатия кнопки и вы увидите что он меняется с

добавлен с помощью одной строки кода. Никаких инлайн-стилей и прочего безобразия.

classList.remove()

Удалить класс так же просто. joke.classList.remove(‘beryl’) возвращает нас к исходному примеру.

Добавление и удаление нескольких классов

В спецификации DOMTokenList говорится о «маркерах» (англ. «tokens» — прим. переводчика), в описании методов add() и remove() они упомянуты во множественном числе.

Метод add(tokens…) […] Если один из маркеров является пустой строкой […] Если один из маркеров содержит любой неотображаемый символ в системе ASCII […] Для каждого маркера из маркеров — Спецификация DOM

Пока ни в одном браузере не реализован метод добавления/удаления более чем одного класса сразу, но для нас не составит труда дополнить прототип DOMTokenList с помощью написанной вручную функции:

В браузерах на движке Blink можно добавлять и удалять несколько классов одновременно с помощью element.classList.add(‘oh’,’my’) , кроме того,
можно дополнить прототип DOMTokenList написанной нами функцией, пока поддержка не будет внедрена во всех браузерах:

Спасибо Девиду и Кэлли за то, что подметили это в комментариях.

Так же и для удаления:

В 2011 году была подана жалоба (касательно документа, который уже не существует) с пожеланием разрешить для classList.add() и classList.remove() список с пробелом в качестве разделителя или массив.

«Маркеры» в множественном числе наталкивают на мысль о том, что массив должен быть разрешен, но на практике он не работает. Указание выводить InvalidCharacterError если в «маркерах» присутствуют пробелы все еще в силе, так что такой подход точно не сработает.

Если вы хотите заменить весь classList новым списком классов, можете использовать функции, которые будут приведены в конце статьи.

classList.contains()

Этот метод при проверке наличия класса в списке возвращает булевы true или false .


contains() полезен, если вам нужно выполнить проверку на наличие класса в списке перед выполнением действия, которое зависит от присутствия этого класса (или его отсутствия).

Можно использовать contains() как дополнение для двух предыдущих функций удаления и добавления нескольких классов, чтобы убедиться, что они не будут пытаться добавить дубликат класса для элемента или удалить класс, который в списке отсутствует:

classList.toggle()

В большинстве случаев поведение classList.toggle() также весьма незамысловато. Этот метод удалит или добавит класс в зависимости от того, присутствует он уже в списке или нет.

Хорошим примером будет простое действие отображения/скрытия:

Взгляните на демо двухуровневого меню, которое занимает немного меньше места при небольшой области просмотра за счёт использования classList.toggle() в целях оптимизации подменю.

force

И все же у toggle() есть небольшая хитрость. При необходимости он может принимать второй аргумент — force .

Если значение force — true , класс может быть добавлен, но не удалён. Если задано false , случится противоположное: класс сможет быть удалён, но не добавлен.

Теперь этот метод сильно напоминает add() и remove() , но есть существенное отличие: toggle() с force возвращает true , когда класс добавлен, и false , когда он удалён, add() и remove() возвращают undefined .

В момент написания статьи аргумент force поддерживали только браузеры на движке Blink, так что откройте демо с true и демо с false в Opera 15, Opera для Android или в последней версии Chrome, чтобы увидеть, как это работает.

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

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

classList.item()

Метод item(index) в JavaScript довольно распространён, большей частью для объектов NodeList. Он возвращает значение позиции в index считая с нуля.

В нашем примере:

Для classList.item() нельзя использовать присваивание, потому joke. выдаст ошибку.

Если вы надеетесь с помощью classList.item() присвоить значение элементу в определённой позиции в списку, боюсь, вы будете разочарованы. Нет такого метода DOMTokenList который давал бы над списком контроль такого рода.

classList.toString()

Если вам однажды понадобится превратить classList в строку, используйте этот метод. toString() — это еще один метод JavaScript, характерный не только для DOMTokenList .

Спецификация W3C по этому поводу говорит только, что «объекты DOMTokenList должны быть преобразованы в строку, которая лежит в их основе». WHATWG остановилась на определении «Обработчик, преобразовывающий список в строку, должен возвратить результат преобразования для соответствующего списка маркеров».

Разница только в формулировке.

Он не принимает никакие параметры, когда используется с classList , и возвращает все классы для элемента в виде строки с пробелом-разделителем.

classList.length

length также является встроенным свойством JavaScript. Оно содержит количество символов в строке, количество позиций в массиве, количество аргументов в функции или (в нашем случае) количество классов в classList . В нашем примере «oh my giddy aunt» его значение равно 4 .

Просто и понятно, я надеюсь.

classList.value

Сами по себе методы item() , toString() и свойство length не слишком полезны. Однако их можно использовать в сочетании друг с другом и с остальными методами DOMTokenList , чтобы решить некоторые проблемы, о которых я упоминал ранее.

Помните, что classList является обычным объектом JavaScript, следовательно, для него можно задавать значение свойств и атрибутов так же, как и для любого другого объекта:


И, конечно же, можно использовать методы. Вот как с помощью length , toString() , add() , и remove() целый список можно заменить новым:

Также можно добавить класс в любой позиции в списке. Для этого используется приём с contains() , item() , remove() , toString() , и replace() , который мы только что рассмотрели:

Если смотреть на вещи реалистично, такие приёмы скорее всего стоит использовать с целью расширения возможностей DOMTokenList , как в случае с addmany() и removemany() , но если вам нужно нечто более узконаправленное для конкретного classList , с которым вы работаете, можно использовать value .

Поддержка браузерами и полифилы

ClassList API работает практически во всех современных версиях браузеров. По меньшей мере базовая поддержка была реализована, начиная с Firefox 3.6, Opera 11.50, Chrome 8 и Safari 5.1.

Белым пятном являются IE9 и старше и всё еще довольно популярный Android 2.3 и старше.

Существует по крайней мере два полифила, которые помогут справиться с этой проблемой.

Написанный на скорую руку полифил Девона Говета (Devon Govett) обеспечивает поддержку только для IE9, также стоит почитать комментарии, содержащие информацию о написании кросбраузерного JavaScript.

Полифил Эли Грея (Eli Grey) дает более широкую поддержку. Он поддерживает IE8 и обеспечивает базовую поддержку classList.add() , classList.remove() и classList.toggle() для Android 2.1 и младше.

Также есть полифил для поддержки force от Егора Халимоненко под браузеры, которые поддерживают classList , но не понимают force для toggle() .

Проверить поддержку API браузером можно следующим образом:

Можно рассматривать classList API в двух плоскостях. В большинстве случаев это простой способ добавить, удалить и проверить наличие отдельных классов для элемента HTML. На данный момент я использую его в каждом проекте, и мне очень редко приходится отклоняться от этих простых методов. Не могу придумать, в каком случае item() , length или toString() могли бы пригодиться сами по себе, поэтому они меня не особо волнуют.

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

Только от вас зависит, для чего вы будете его использовать, но, как я говорил в начале, с classList API легко разобраться, и он делает легким то, что раньше было трудным. Советую прислушаться к тому, о чём я здесь написал, и поэкспериментировать в своих собственных проектах, если для вас classList API является новым понятием; если же он вам уже хорошо знаком, поделитесь в комментариях мнением о том, что можно было бы рассказать лучше.

ClassList html5 эмулятор

Частная коллекция качественных материалов для тех, кто делает сайты

  • Фотошоп-мастер2000+ уроков по фотошопу
  • Фото-монстр300+ уроков для фотографов
  • Видео-смайл200+ уроков по видеообработке
  • Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни
  • Главная»
  • Уроки»
  • Уроки jQuery для начинающих

В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.

Анимация набора текста на jQuery


Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Илон Маск рекомендует:  md5_file - Возвращает MD5-хэш файла

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Stimed — стили в зависимости от времени суток

Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.

jQuery плагин для отображения превью загружаемого файла

Небольшой jQuery плагин, который позволит увидеть миниатюру изображения ещё до загрузки на сервер.

Can I use classList?

Compatibility table for support of classList in desktop and mobile browsers.

Legend

  • Green = Supported
  • Red = Not supported
  • Greenish yellow = Partial support
  • Gray = Support unknown

Global usage

Method of easily manipulating classes on elements, using the DOMTokenList object.

  1. 5.5
  2. 6
  3. 7
  4. 8

  5. 9
  6. 10
  7. 11
  1. 12
  2. 13
  3. 14
  4. 15
  5. 16
  6. 17
  7. 18
  8. 76

Firefox

  1. 2
  2. 3
  3. 3.5
  4. 3.6
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. 11
  13. 12

  14. 13
  15. 14
  16. 15
  17. 16
  18. 17
  19. 18
  20. 19
  21. 20
  22. 21
  23. 22
  24. 23
  25. 24
  26. 25
  27. 26
  28. 27
  29. 28
  30. 29
  31. 30
  32. 31
  33. 32
  34. 33
  35. 34
  36. 35
  37. 36
  38. 37
  39. 38
  40. 39
  41. 40
  42. 41
  43. 42
  44. 43
  45. 44
  46. 45
  47. 46
  48. 47
  49. 48
  50. 49
  51. 50
  52. 51
  53. 52
  54. 53
  55. 54
  56. 55
  57. 56
  58. 57
  59. 58
  60. 59
  61. 60
  62. 61
  63. 62
  64. 63
  65. 64
  66. 65
  67. 66
  68. 67
  69. 68
  70. 69
  71. 70
  72. 71
  73. 72

Chrome

  1. 4
  2. 5
  3. 6
  4. 7
  5. 8
  6. 9
  7. 10
  8. 11
  9. 12
  10. 13
  11. 14
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 59
  57. 60
  58. 61
  59. 62
  60. 63
  61. 64
  62. 65
  63. 66
  64. 67
  65. 68
  66. 69
  67. 70
  68. 71
  69. 72
  70. 73
  71. 74
  72. 75
  73. 76
  74. 77
  75. 78
  76. 79
  77. 80
  78. 81

Safari

  1. 3.1
  2. 3.2
  3. 4
  4. 5
  5. 5.1
  6. 6
  7. 6.1
  8. 7
  9. 7.1
  10. 8
  11. 9
  12. 9.1
  13. 10
  14. 10.1
  15. 11
  16. 11.1
  17. 12
  18. 12.1
  19. 13
  20. TP

Opera

  1. 9
  2. 9.5-9.6
  3. 10.0-10.1
  4. 10.5
  5. 10.6
  6. 11
  7. 11.1
  8. 11.5
  9. 11.6
  10. 12
  11. 12.1
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 60
  57. 62
  58. 63
  59. 64

iOS Safari

  1. 3.2
  2. 4.0-4.1
  3. 4.2-4.3
  4. 5.0-5.1
  5. 6.0-6.1
  6. 7.0-7.1
  7. 8
  8. 8.1-8.4
  9. 9.0-9.2
  10. 9.3
  11. 10.0-10.2
  12. 10.3
  13. 11.0-11.2
  14. 11.3-11.4
  15. 12.0-12.1
  16. 12.2-12.4
  17. 13.0-13.2

Opera Mini

Android Browser

  1. 2.1
  2. 2.2
  3. 2.3
  4. 3
  5. 4
  6. 4.1
  7. 4.2-4.3
  8. 4.4
  9. 4.4.3-4.4.4
  10. 76

Blackberry Browser

Opera Mobile

  1. 10
  2. 11
  3. 11.1
  4. 11.5
  5. 12
  6. 12.1
  7. 46

Chrome for Android

Firefox for Android

IE Mobile

UC Browser for Android

Samsung Internet

  1. 4
  2. 5.0-5.4
  3. 6.2-6.4
  4. 7.2-7.4
  5. 8.2
  6. 9.2
  7. 10.1

QQ Browser

Baidu Browser

KaiOS Browser

Browser support tables for modern web technologies

Created & maintained by @Fyrd, design by @Lensco.

Support data contributions by the GitHub community.

Usage share statistics by StatCounter GlobalStats for October, 2020

emulate_su

Добрые видеоигры

Видеоигры — самое яркое из детства от Apple II до Dendy

Grant Galitz, 19-летний программист из Флориды, написал на HTML5 с использованием JavaScript эмулятор GameBoy Color.

Эмулятор отлично работает под Mozilla FireFox 4 (без тормозов и со звуком). Однако при выборе новой игрушки эмулятор начинает жутко тормозить, приходиться закрывать таб и открывать заново. Терпимо работает под Google Chromium 12, правда графика немного сглажена и местами эмулятор притормаживает :( Под Opera 11.11 эмулятор заметно тормозит, вместо звука характерные щелчки :( Под Midori (WebKit) эмулятор запустился, однако при выборе файла ничего не происходит.

В целом эмулятор оставил хорошие впечатления, имеет есть настройки, возможность загрузки образа картриджа GBC, как с локального диска, так и с URL или даже BASE64. Проект имеет исходные коды на github.

Управление с помощью клавиш курсора, ENTER — это «start», SHIFT — это «select». Клавиши Z и X — «A» и «B» соответственно. Для примера, картриджи с играми GameBoy Color можно найти здесь.

How to manipulate classes without jQuery by using HTML5’s classList API

As a front end developer, you often need to change CSS rules based on how a user interacts with elements on a page.

In the past, I relied on jQuery to handle these kinds of DOM manipulations for me. But in some cases, it doesn’t make sense to import the whole jQuery library, just so you can perform some basic DOM manipulation.

Luckily, HTML5 offers a way to do this natively, without the need for jQuery.

How I discovered HTML5’s classList method

A few days ago, I was reading some code. I noticed that one project included jQuery as a dependency, just so they could add and remove classes when the user clicked a button on the page. The entire interaction code was only 11 lines of code.

I thought it was weird they were doing it this way. It was the equivalent of using a bazooka (jQuery) to kill a mosquito (adding and removing classes upon a click).

The code in question

It occurred to me that I’d probably done similar things in my previous coding projects. So I decided to try to replicate the same functionality using plain JavaScript and see what I can learn from that.

A quick search turned up several options for doing this in plain JavaScript. I went with the classList method because it’s easy to understand and cross-browser support is quite good.

According to Can I Use, classList works everywhere except Opera Mini and Internet Explorer 8.

Note that if you need to support Internet Explorer versions older than IE 11, you may need to find an alternative method or use a polyfill.

If you’re wholly reliant on using jQuery for DOM handling, this is a great place to start gaining some independence from jQuery.

What is the classList API?

The HTML5 classList API provides a way to grab all the classes associated with an element so that you can use JavaScript to modify them.

Using the classList DOM property on an element will return a DOMTokenList. This contains all the classes applied to an element, and the length property, which signifies the total number of classes on that element.

Take a look at this example:

You can try the above in your browser to see it in action.

Getting the classes of an element is all well and good, but it isn’t all that useful on its own. We need a way to manage and update those classes. The classList property provides a few methods that do just that:

  • add(): Adds specified classes
  • remove(): Removes specified classes
  • contains(): Checks whether the specified class exists on the element
  • toggle(): toggles specified class
  • index(): returns the class at a specified position in the list
  • length: returns the number of classes

Let’s take a look at each one in turn.

Adding classes

Adding a class to an element is straightforward. Just apply the class name as an argument to the add() method. Note that if the class name already exists on the element, it won’t be added again.

To add multiple classes, separate each class with a comma:

Removing classes

To remove a class, all you need to do is pass the class name as an argument to the remove() method. If the class name doesn’t already exist in the classList, an error is thrown.

To remove multiple classes, separate each class with a comma:

Check whether a class exists

Using the contains() method, we can check whether a specified class is present in an element’s classList and perform operations based on the return value.

Toggling Classes

Adding or removing a class based on user action is a common thing to do. This was exactly what I wanted to achieve with classList.

You can toggle between adding and removing using the toggle() method.

Here’s what I eventually did:

Check the number of classes

To find out how many classes are applied to an element, use the length property:

Wrapping up

As you can see, the classList API is easy to use. I encourage you to begin exploring its capabilities in your own applications.

Also, leave a comment if you have any questions, or reach out to me on Twitter. For more articles like this one, check out my blog. Thanks for reading!

If this article was helpful, tweet it or share it.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL