Skip to content

Instantly share code, notes, and snippets.

@maximishchenko
Last active October 16, 2016 14:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maximishchenko/d8b13f18cafd336301a43fdec85c40fe to your computer and use it in GitHub Desktop.
Save maximishchenko/d8b13f18cafd336301a43fdec85c40fe to your computer and use it in GitHub Desktop.
Javascript: добавление, удаление, переключение классов элемента
/**
* @author [Maxim Ishchenko <maxim.ishchenko@gmail.com>]
* @param {[string]} [title] [Набор методов для добавления, удаления, переключения класса элемента]
* [classesManipulation содержит набор методов для добавления/удаления классов элемента, в случае его наличия]
* @return {[none | false]} [производит указанный набор манипуляций с классами элемента в случае его наличия]
* @example
* // добавить скрипт на страницу:
* script type="text/javascript" src="path/to/this/script"
* // объявить класс:
* var classesManipulation = new classesManipulation();
* // Для добавления класса 'myCssClass' к элементу с ID tmp:
* tmpClass.addClass('tmp', 'myCssClass');
* // Для удаления класса 'myCssClass' у элемента с ID tmp:
* tmpClass.removeClass('tmp', 'myCssClass');
* // Для переключения класса 'myCssClass' у элемента с ID tmp:
* tmpClass.toggleClass('tmp', 'myCssClass');
* // Для просмотра списка классов элемента с ID tmp (в целях отладки):
* tmpClass.printClassList('tmp');
*
*/
function classesManipulation() {
/**
* [isElement проверяет существование элемента по идентификатору]
* @param {[string]} element [идентификатор элемента]
* @return {Boolean} [true/false, отправляет в консоль сообщение, в случае отсутствия элемента, вернет false в случае, если метод класса вызывается до объявления элемента с указанным идентификатором, т.е. скрипт будет выполнен до отображения <div id="elementID"> ... </div>]
*/
this.isElement = function(element) {
el = document.getElementById(element);
return el ? true : false & console.log('element with this id does not exist');
}
/**
* [addClass добавляет класс элементу с указанным id]
* @param {[string]} element [идентификатор id элемента]
* @param {[string]} classname [имя добавляемого класса]
* @return {[none | false]} [добавляет класс | возвращает false, в случае отсутствия элемента]
*/
this.addClass = function(element, classname) {
return this.isElement(element) ? el.classList.add(classname) : false;
}
/**
* [removeClass удаляет указанный класс у элемента с указанным id]
* @param {[string]} element [идентификатор id элемента]
* @param {[string]} classname [имя добавляемого класса]
* @return {[none | false]} [удаляет класс | возвращает false, в случае отсутствия элемента]
*/
this.removeClass = function(element, classname) {
return this.isElement(element) ? el.classList.remove(classname) : false;
}
/**
* [toggleClass добавляет указанный класс элементу с указанным id, в случае его отсутствия, в случае наличия - удаляет]
* @param {[string]} element [идентификатор id элемента]
* @param {[string]} classname [имя добавляемого класса]
* @return {[none | false]} [добавляет/удаляет класс | возвращает false, в случае отсутствия элемента]
*/
this.toggleClass = function(element, classname) {
return this.isElement(element) ? el.classList.toggle(classname) : false;
}
/**
* [printClassList выводит на экран список классов элемента с указанным id]
* @param {[string]} element [идентификатор id элемента]
* @return {[string | false]} [возвращает строку со списком классов или false при отсутствии элемента]
*/
this.printClassList = function(element) {
return this.isElement(element) ? document.write(el.classList) : false;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment