How to add css class from css file to a js variable

Question

I have color-switcher css files.It contains css classes.The class are for colors.

Like this:

color-2.css:

/* Template Color Default  #ff6600 = rgba(255, 102, 0, */

/* TEXT COLOR */
nav.navbar.bootsnav.menu-style1 ul.dropdown-menu.megamenu-content .title,
.upcoming-event .clock.flip-clock-wrapper ul li a div div.inn,
.pagination>li>a,
.fancybox-gallery-slider .owl-prev,
.fancybox-gallery-slider .owl-next,
.team-icon a,
.twitter.style2 ul li a,
.inner-conraimer-details h1,
.text-thm2 {
  color: #ff6600 !important;
}

I must add these css classes to a js variable and access this js variable from a js file.

I have below js code:

 if (Bcolor === 'rgb(22, 160, 133)') {

            $("ul.colors .color1").on('click', function() {
                node.style.setProperty("background-color", "red", "important");
                document.querySelector(".ulockd-btn-white").classList.add("mystyle");

                var style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = '.cssClass:hover { background-color:  cyan!important ; } .colorful-buton-class:hover { background-color:  cyan!important ; }  .colorful-buton-class > * > * > [role=button] { background-color:  cyan!important ; }  .wpforms-form button[type=submit]:hover { background-color:cyan!important; }  ';
                document.getElementsByTagName('head')[0].appendChild(style);

                return false;
            });

            $("ul.colors .color2").on('click', function() {
                node.style.setProperty("background-color", "pink", "important");



                document.querySelector(".ulockd-btn-white").classList.add("mystyle");

                var style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = '.cssClass:hover { background-color:  orange!important ; } .colorful-buton-class:hover { background-color:  orange!important ; }  .colorful-buton-class > * > * > [role=button] { background-color:  orange!important ; }  .wpforms-form button[type=submit]:hover { background-color:orange!important; }  ';
                document.getElementsByTagName('head')[0].appendChild(style);


                return false;
            });

        }


    });

there are some css classes in this js class:

 style.innerHTML = '.cssClass:hover { background-color:  cyan!important ; } .colorful-buton-class:hover { background-color:  cyan!important ; }  .title-bottom:before {background-color: red!important; } .mt-separator::before, .mt-separator:before, .mt-separator::after {background-color: red!important; } .ulockd-btn-thm2:hover { background-color:cyan!important; } .wpforms-form button[type=submit]:hover { background-color:cyan!important; } .elementor-icon, .elementor-heading-title { color:red!important; }  ';
              

I must add the css file content to this variable.

how can I do it?

you can use jquery.

I am new at js and jquery.

Answer 1

Keep all styles as classes in one css file. Then, import that css file to HTML file. Don't put styles inside JS. So, your all style classes will be in one css file. Then, you can add style classes you want in click functions separately. You can use following code to add class.

var element = document.getElementById("myDIV");
element.classList.add("your_style_class");