diff --git a/collections/DOM/class-manipulation-prototype.md b/collections/DOM/class-manipulation-prototype.md new file mode 100644 index 00000000..8d71c6aa --- /dev/null +++ b/collections/DOM/class-manipulation-prototype.md @@ -0,0 +1,13 @@ +~~~ javascript +// el.addClass('the-class'); +Element.prototype.addClass = function(newClass) { this.classList.add(newClass); return this; } + +// el.removeClass('the-class'); +Element.prototype.removeClass = function(oldClass) { this.classList.remove(oldClass); return this; } + +// el.toggleClass('the-class'); +Element.prototype.toggleClass = function(thisClass) { this.classList.toggle(thisClass); return this; } + +// if(el.hasClass('the-class')) +Element.prototype.hasClass = function(thisClass) { return this.classList.contains(thisClass); } +~~~ diff --git a/collections/DOM/get-set-element-value-prototype.md b/collections/DOM/get-set-element-value-prototype.md new file mode 100644 index 00000000..011d0078 --- /dev/null +++ b/collections/DOM/get-set-element-value-prototype.md @@ -0,0 +1,5 @@ +~~~ javascript +// set value --> el.val('Hello World'); +// get value --> el.val(); +Element.prototype.val = function(newValue) { if(newValue === undefined) return this.value; this.value = newValue; return this; } +~~~ diff --git a/collections/DOM/hide-show-an-element-prototype.md b/collections/DOM/hide-show-an-element-prototype.md new file mode 100644 index 00000000..9a237358 --- /dev/null +++ b/collections/DOM/hide-show-an-element-prototype.md @@ -0,0 +1,10 @@ +~~~ javascript +// el.hide(); +Element.prototype.hide = function() { this.style.display = 'none'; return this; } + +// el.hide(); +Element.prototype.show = function() { this.style.display = ''; return this; } + +// el.toggle(); +Element.prototype.toggle = function() { this.style.display = (this.style.display !== 'none') ? 'none' : ''; return this; } +~~~