Web Development Articles - Page 523 of 1049

To find out if an element is hidden with JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .hiddenDiv {       width: 100%;       padding: 20px;       text-align: center;       background-color: lightblue;       margin-top: 20px;       display: none;       font-size: 20px;    }    .showBtn {       border: none;       padding: 15px;       font-size: 18px;       background-color: rgb(86, 25, ... Read More

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 −

In this tutorial, we will look at a few methods to remove a property from a JavaScript object. And compare them to understand which one is suitable in a given context. Let's move forward to discuss this. Using the delete Operator Here, the delete operator removes the keys from the object, one at a time. The delete operator does not clear the memory directly. The delete keyword works on objects only. We can't use it on variables or functions. We should not use the delete keyword on predefined JavaScript object properties as it may give errors. The deleted property displays ... Read More

On a web page, if you want to represent a folder-view, like in case of web hosting filed, then create a tree view. The root or the home are always clickable in a tree view. We set it clickable using the cursor property with the value pointer. The arrow key is rotated 90 degrees when it is clicked. This is achieved using the rotate() method with the transform property. Set the tree view root The root for the tree view is set using the . Within that, is set − ... Read More

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 −