Enable/Load and Disable CSS using jQuery

Enable/Load and Disable CSS using jQuery

14-Sep-2024
| |
Image Carousel

Table of Contents

S.no Contents-topics
1 Enabe and disable css using jQuery

1:Enable and disable CSS using jQuery

Sometimes when we are working on a project where we have to work with two different themes like one is Dark Mode and other one is Light Mode , so what options we have * we may load the page using JS but that one seems to be old method to do that functionality .

Also read:PREVIEW AN IMAGE BEFORE UPLOADING USING JQUERY

So we do toggle the theme or we may say that load the css using jquery or enable and disable the css using jQuery.
HTML code :Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Corner</title>
   
    <!-- CSS only -->
    <link id="darkTheme" href="https://vm-services.tech/developerCorner/css/changeDark.css" disabled="disabled" rel="stylesheet" />
    <link id="lightTheme" href="https://vm-services.tech/developerCorner/css/changeWhite.css" rel="stylesheet" />
 
    <!-- Js -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
 
</head>
<body>
   <h3>Hello Developer</h3>
 
  <div id="changeTheme"><button onclick="changeMyCss('dark')">click for Dark Mode</button></div>
</body>
</html>
<script>
    function changeMyCss(theme)
    {
        var html = '';
        if(theme == 'dark'){
            $('#lightTheme').attr('disabled', 'disabled');
            $('#darkTheme').removeAttr('disabled');
            html+='<button onclick="changeMyCss(\'light\')">click for Light Mode</button>';
        }else{
            $('#darkTheme').attr('disabled', 'disabled');
            $('#lightTheme').removeAttr('disabled');
            html+='<button onclick="changeMyCss(\'dark\')">click for Dark Mode</button>';
        }
        $('#changeTheme').html(html);
    }
</script>

Also read:DOM ELEMENTS IN JQUERY

 

Tags: how to load and disable css using jquery , how to enable and disable css using jquery , light theme and dark theme using jquery,jquery , advance jquery , jquery advance code,
image Vineet Maanas

We are Vineet Maanas we are working as professional developers from the last 8 years and always looking to discover something amazing getting followed by market trends and always push new developers to learn something new with our tutorials Thankyou.

0 Comments (Please let us know your query)
Leave Comment
Leave Comment
Articles from other Categories
https://developercodez.com/post/1728716924/what-is-sql
photo blog DeveloperCodez 12-Oct-2024

What is SQL

https://developercodez.com/post/1699468294/methods-in-vue-js-3-,-what-are-methods-in-vue-js-3-,-how-to-create-methods-in-vue-js-3
photo blog DeveloperCodez 14-Sep-2024

Methods in Vue js 3 , What are methods in vue js 3 , How to create methods in vue js 3

https://developercodez.com/post/1690310870/passing-data-and-functions-from-components--in-vue-js-3
photo blog DeveloperCodez 14-Sep-2024

Passing data and functions from Components in Vue js 3

https://developercodez.com/post/1690272944/setup-custom-route-file-in-vue-js-3
photo blog DeveloperCodez 14-Sep-2024

Setup Custom Route file in vue js 3

https://developercodez.com/post/1690224693/create-components-in-vue-js-3
photo blog DeveloperCodez 14-Sep-2024

Create Components in Vue js 3

https://developercodez.com/post/1690223865/setup-and-install-vue-js-3
photo blog DeveloperCodez 14-Sep-2024

Setup and install Vue js 3

https://developercodez.com/post/1689059219/creating-a-local-database-with-sqflite-in-flutter:-step-by-step-guide
photo blog DeveloperCodez 14-Sep-2024

Creating a Local Database with Sqflite in Flutter: Step-by-Step Guide

https://developercodez.com/post/1688969478/real-time-data-transmission-in-laravel-10-using-pusher-step-by-step-guide-and-example
photo blog DeveloperCodez 14-Sep-2024

Real-Time Data Transmission in Laravel using Pusher: Step-by-Step Guide and Examples

https://developercodez.com/post/1688578442/create-a-simple-bar-graph-using-javascript
photo blog DeveloperCodez 14-Sep-2024

Create a simple Bar Graph using Javascript

Load More

Newsletter

Subscribe