Last active
October 16, 2016 14:14
-
-
Save maximishchenko/d8b13f18cafd336301a43fdec85c40fe to your computer and use it in GitHub Desktop.
Javascript: добавление, удаление, переключение классов элемента
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @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