Javascript 如何将css类从css文件添加到js变量

我有颜色切换css文件。它包含css类。该类用于颜色

像这样：

颜色-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;
}

我必须将这些css类添加到js变量中，并从js文件访问此js变量

我有以下js代码：

 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;
            });

        }


    });

这个js类中有一些css类：

 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; }  ';
              

我必须将css文件内容添加到此变量

我怎么做

您可以使用jquery

---

我不熟悉js和jquery。

将所有样式作为类保存在一个css文件中。然后，将该css文件导入HTML文件。不要将样式放在JS中。因此，您的所有样式类都将位于一个css文件中。然后，可以分别在单击函数中添加所需的样式类。可以使用以下代码添加类

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

---

我如何添加url而不是“你的类”？你必须在那里添加类名。你能编辑你的问题给我一个完整的例子吗*您已经陷入了代码中不必要的复杂性。请参阅此链接。在答案中使用JS为样式添加类，并为元素添加类。因此，您的消息与我的答案不匹配