Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To detect whether the browser is online or offline with JavaScript, the code is as follows −Example Live Demo Online or offline with JavaScript example Click the button below to check if you are online or not Check online/offline function checkOnlineOffline() { if(navigator.onLine===true){ document.querySelector('.sample').innerHTML = "You are connected to internet" } else { document.querySelector('.sample').innerHTML = "You are not connected to internet" } } OutputThe above code will produce the following output −On clicking the “Check online/offline” button −
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 More
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 −
To add a class name to 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.add("newStyle"); } OutputThe above code will produce the following output −On clicking the “Click here” button −
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 −