Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Articles on Trending Technologies
Technical articles with clear explanations and examples
How to add an active class to the current element with JavaScript?
To add an active class to the current element with JavaScript, the code is as follows −Example Live Demo .btn { border: none; outline: none; padding: 10px 16px; background-color: #6ea2f0; cursor: pointer; color:white; font-size: 18px; } .active, .btn:hover { background-color: #666; color: white; } Active Button Example Giraffe Cow Lion Leopard Cheetah Press any of the above button to set it ...
Read MoreHow to remove a class name from an element with JavaScript?
To remove 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; } Remove className with JavaScript Example Remove Class Click the above button to remove className from below div This is a DIV element. document.querySelector(".btn").addEventListener("click", addClassName); function addClassName() { var element = document.getElementById("sampleDiv"); element.classList.remove("newStyle"); } OutputThe above code will produce the following output −On clicking the the “Remove Class” button −
Read MoreHow to toggle between adding and removing a class name from an element with JavaScript?
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 −
Read MoreHow to toggle text with JavaScript?
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 −
Read MoreHow to switch between dark and light mode with CSS and JavaScript?\\n
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 −
Read MoreHow to toggle between hiding and showing an element with JavaScript?
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 MoreHow to create a fixed/sticky header on scroll with CSS and JavaScript?
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 MoreHow to create a gradient background color on scroll with CSS?
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 −
Read MoreHow to draw on scroll using JavaScript and SVG?
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 MoreHow to make a fullscreen window with JavaScript?
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
Read More