Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To toggle between adding and removing a class name from an element with JavaScript, the code is as follows −Example Live Demo .newStyle { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; width: 100%; padding: 25px; background-color: rgb(147, 80, 255); color: white; font-size: 25px; box-sizing: border-box; text-align: center; } Adding className with JavaScript Example Click here Click the above button to add className to below div This is a DIV element. document.querySelector(".btn").addEventListener("click", addClassName); function addClassName() { var element = document.getElementById("sampleDiv"); element.classList.toggle("newStyle"); } OutputThe above code will produce the following output −On clicking the “Click here” button −
To toggle text with JavaScript, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .textDiv { font-size: 20px; background-color: rgb(199, 228, 157); width: 100%; padding: 15px; font-weight: bold; } .toggleBtn { padding: 15px; border: none; background-color: rgb(106, 41, 153); color: white; font-size: 18px; } Toggle Text example Click Me Click on the above button to toggle below text Old Text document .querySelector(".toggleBtn") .addEventListener("click", toggleText); function toggleText() { var x = document.querySelector(".textDiv"); if (x.innerHTML === "Old Text") { x.innerHTML = "New Text"; } else { x.innerHTML = "Old Text"; } } OutputThe above code will produce the following output −On clicking the “Click Me” button −
To switch between dark and light mode with JavaScript, the code is as follows −Example Live Demo body { padding: 25px; background-color: white; color: black; font-size: 25px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .dark-mode { background-color: black; color: white; } .toggleButton { padding: 12px; font-size: 18px; border: 2px solid green; } Toggle Dark/Light Mode Example Toggle dark mode Click the above button to toggle dark mode document .querySelector(".toggleButton") .addEventListener("click", toggleDarKMode); function toggleDarKMode() { var element = document.body; element.classList.toggle("dark-mode"); } OutputThe above code will produce the following output −On clicking the “Toggle dark mode” button −
To toggle between hiding and showing an element with JavaScript, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } button { padding: 10px; border: none; background-color: rgb(51, 51, 192); color: white; font-size: 18px; } .div-visible { width: 100%; padding: 50px 0; text-align: center; background-color: rgb(210, 230, 173); margin-top: 20px; ... Read More
To create fixed/sticky header on scroll with CSS and JavaScript, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 0px; padding: 0px; height: 150vh; /*To produce scroll bar*/ } .header { width: 100%; background-color: rgb(52, 21, 110); color: white; padding: 50px; font-size: 20px; } div.sticky { position: fixed; top: 0; ... Read More
To create a gradient background color on scroll, the code is as follows −Example Live Demo body { height: 250vh; color: white; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient( 141deg, #a47dff 0%, #4e28a7 40%, #22053d 65%, #72a4ff 75% ); } Change Background Gradient on Scroll Example Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, laborum minus? Vero accusantium laborum quas cum, sed obcaecati quibusdam dignissimos. Scroll to see the effect. OutputThe above code will produce the following output −While scrolling the gradient will shift from dark blue to light blue −
To draw on scroll using JavaScript and SVG, the code is as follows −Example Live Demo body { height: 2000px; background: #f1f1f1; } svg { position: fixed; top: 15%; width: 400px; height: 210px; margin-left: -50px; } Scroll Using JavaScript and SVG example var polygon = document.getElementById("polygon"); var length = polygon.getTotalLength(); polygon.style.strokeDasharray = length; polygon.style.strokeDashoffset = length; window.addEventListener("scroll", drawPoly); function ... Read More
To create a fullscreen window with JavaScript, the code is as follows −Example Live Demo body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } button{ display: block; padding:10px; margin:10px; background-color: rgb(81, 0, 128); border:none; color:white; } Fullscreen Window with JavaScript Example
The symbol.description property returns the optional description of the symbol objects and is a read only property.Following is the code for symbol.description property −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { font-size: 20px; font-weight: 500; } JavaScript symbol.description property CLICK HERE Click on the above button to get the description for the symbols. let fillEle = document.querySelector(".sample"); let desc = []; desc.push(Symbol("New").description); desc.push(Symbol("Hello").description); desc.push(Symbol.iterator.description); document.querySelector(".Btn").addEventListener("click", () => { desc.forEach((item) => (fillEle.innerHTML += item + "")); }); OutputOn clicking the “CLICK HERE” button −
The JavaScript array.flatMap() function flattens the given nested array into a new flat array.Following is the code for the array.flatMap() method −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 20px; font-weight: 500; } JavaScript Array flatMap() CLICK HERE Click on the above button to convert the nested array to flat array let fillEle = document.querySelector(".sample"); let arr = ["cow", ["bull", "lion", "tiger"], "sheep"]; for ... Read More