DOM Manipulation Snippets

Author: JanluOfficial

snippets/javascript/dom-manipulation/add-a-css-class-to-an-element.md

@@ -0,0 +1,18 @@
+---
+title: Add a CSS Class to an element
+description: Add a CSS class to a HTML element.
+author: JanluOfficial
+tags: css,style
+---
+
+```js
+function addClass(element, className) {
+    if (element && className) {
+        element.classList.add(className);
+    }
+}
+
+// Usage:
+const myElement = document.getElementById("myElement");
+addClass(myElement, "myClass");
+```

snippets/javascript/dom-manipulation/get-computed-style-from-an-element.md

@@ -0,0 +1,19 @@
+---
+title: Get Computed Style from an Element
+description: Retrieve the computed style of a specific CSS property from an HTML element.
+author: JanluOfficial
+tags: css,style
+---
+
+```js
+function getComputedStyle(element, styleProp) {
+    if (element && styleProp) {
+        return window.getComputedStyle(element, null).getPropertyValue(styleProp);
+    }
+    return null;
+}
+
+// Usage:
+const myElement = document.getElementById("myElement");
+toggleClass(myElement, "background-color");
+```

snippets/javascript/dom-manipulation/remove-a-css-class-from-an-element.md

@@ -0,0 +1,18 @@
+---
+title: Remove a CSS Class to an element
+description: Remove a CSS class to a HTML element.
+author: JanluOfficial
+tags: css,style
+---
+
+```js
+function removeClass(element, className) {
+    if (element && className) {
+        element.classList.remove(className);
+    }
+}
+
+// Usage:
+const myElement = document.getElementById("myElement");
+removeClass(myElement, "myClass");
+```

snippets/javascript/dom-manipulation/toggle-a-css-class-on-an-element.md

@@ -0,0 +1,18 @@
+---
+title: Toggle a CSS Class on an Element
+description: Toggle a CSS class on an HTML element.
+author: JanluOfficial
+tags: css,style
+---
+
+```js
+function toggleClass(element, className) {
+    if (element && className) {
+        element.classList.toggle(className);
+    }
+}
+
+// Usage:
+const myElement = document.getElementById("myElement");
+toggleClass(myElement, "myClass");
+```