Набор функций для работы с классами CSS.
Включает реализацию функций, упрощающих работу с CSS-классами HTML-элементов страницы.
Требует загрузки модуля Classes.
add
y5.Classes.add(element, name) -> Array — добавленные классы
Добавляет новые CSS-классы заданному HTML-элементу страницы. В зависимости от типа передаваемых в параметре name данных, можно добавлять один или несколько классов одновременно. Если в качестве параметра name передается строка, то к существующим классам будет добавлен один новый класс с именем, соответствующим данной строке. Если в качестве параметра name передается массив, то к существующим классам будет добавлено несколько новых классов с именами, соответствующими элементам массива. Метод возвращает массив, содержащий названия добавленных классов.
| Имя аргумента | Тип | Описание |
|---|---|---|
| element | HTMLElement | элемент |
| name | String, Array | имя класса |
Пример:
// <div class="one"/> y5.Classes.add(element, 'two'); // -> ['two'] // <div class="one two"/> // <div class="one"/> y5.Classes.add(element, ['foo', 'bar']); // -> ['foo', 'bar'] // <div class="one foo bar"/> // <div class="one"/> y5.Classes.add(element, 'one foo bar'); // -> ['one', 'foo', 'bar'] // <div class="one foo bar"/>
assign
y5.Classes.assign(element, name, test) -> Array — добениеавленные или удаленные классы
Добавляет/удаляет CSS-класс HTML-элемента страницы в зависимости от условия. Если значение параметра test рано true, то класс с именем, переданным в name, будет добавлен. Если значение параметра test рано false, то класс с именем, переданным в name, будет удален. Данный метод поддерживает операции добавления/удаления одновременно нескольких классов. Для этого в параметре name необходимо передавать массив имен классов. В качестве результата возвращается массив названий добавленных/удаленных классов.
| Имя аргумента | Тип | Описание |
|---|---|---|
| element | HTMLElement | элемент |
| name | String, Array | имя класса |
| test | Boolean | если значение равно true, то добавляется новый класс, иначе - удаляется |
Пример:
// <div class="one"/> y5.Classes.assign(element, 'two', true); // -> ['two'] // <div class="one two"/> // <div class="one two"/> y5.Classes.assign(element, 'two', false); // -> ['two'] // <div class="one"/>
remove
y5.Classes.remove(element, name) -> Array — удаленные классы
Удаляет CSS-классы у заданного HTML-элемента страницы. В зависимости от типа передаваемых в параметре name данных, можно удалять один или несколько классов одновременно. Если в качестве параметра name передается строка, то удаляется один класс с именем, соответствующим переданной строке. Если в качестве параметра name передается массив, то будет удалено несколько классов с именами, соответствующими элементам массива. Метод возвращает массив, содержащий названия удаленных классов.
| Имя аргумента | Тип | Описание |
|---|---|---|
| element | HTMLElement | элемент |
| name | String, Array | имя класса |
Пример:
// <div class="one two"/> y5.Classes.remove(element, 'two'); // -> ['two'] // <div class="one"/>
replace
y5.Classes.replace(element, find, replace) -> Boolean — true, если класс find был заменен на replace
Заменяет один CSS-класс на другой у заданного HTML-элемента страницы. Имя заменяемого класса может быть задано строкой или регулярным выражением. Метод возвращает true, если класс был успешно заменен.
| Имя аргумента | Тип | Описание |
|---|---|---|
| element | HTMLElement | элемент |
| find | String, RegExp | заменяемое имя класса |
| replace | String | новое имя класса |
Пример:
// <div class="one two"/> y5.Classes.replace(element, 'two', 'three'); // -> true // <div class="one three"/>
set
y5.Classes.set(element, name) -> Boolean — true, если класс был установлен
Присваивает заданному HTML-элементу страницы нового имени CSS-класса вместо существующего. Метод возвращает true, если класс был успешно установлен, или false, если HTML-элемент страницы уже имеет класс с данным именем.
| Имя аргумента | Тип | Описание |
|---|---|---|
| element | HTMLElement | элемент |
| name | String | имя класса |
Пример:
// <div class="one"/> y5.Classes.set(element, 'two'); // -> true // <div class="two"/> // <div class="one"/> y5.Classes.set(element, 'one'); // -> false // <div class="one"/>
swap
y5.Classes.swap(element, name1, name2) -> String — класс, который заменил собой искомый
Переключает CSS-класс у заданного HTML-элемента страницы с одного значения на другое. В качестве параметров передаются два имени классов, и HTML-элементу присваивается тот, который отличается от текущего. Метод возвращает имя CSS-класса, на который был переключен исходный класс.
| Имя аргумента | Тип | Описание |
|---|---|---|
| element | HTMLElement | элемент |
| name1 | String | имя класса |
| name2 | String | имя класса |
Пример:
// <div class="one"/> y5.Classes.swap(element, 'two', 'one'); // -> 'two' // <div class="two"/> // <div class="two"/> y5.Classes.swap(element, 'two', 'one'); // -> 'one' // <div class="one"/>
test
y5.Classes.test(element, name, nocache) -> Boolean — результат проверки
Проверяет HTML-элемент страницы на наличие у него заданного CSS-класса. Имя класса может быть задано строкой или регулярным выражением. Метод возвращает true, если HTML-элемент имеет требуемый класс.
| Имя аргумента | Тип | Описание |
|---|---|---|
| element | HTMLElement | элемент |
| name | String, RegExp | имя класса |
| nocache | Boolean | не кэшировать результат проверки |
Пример:
// <div class="one two"/> y5.Classes.test(element, 'two'); // -> true
toggle
y5.Classes.toggle(element, name) -> Boolean — true, если класс был добавлен
Устанавливает/сбрасывает CSS-класс у заданного HTML-элемента страницы. Класс будет сброшен (удален), если HTML-элемент уже имеет класс с заданным именем. Класс будет установлен (добавлен), если у HTML-элемента нет класса с заданным именем. Метод возвращает true в случае установки CSS-класса или false в случае его сброса.
| Имя аргумента | Тип | Описание |
|---|---|---|
| element | HTMLElement | элемент |
| name | String | имя класса |
Пример:
// <div class="one two"/> y5.Classes.toggle(element, 'two'); // -> false // <div class="one"/> // <div class="one"/> y5.Classes.toggle(element, 'two'); // -> true // <div class="one two"/>