如何將css class從css文件添加到js變量

Question

我有顏色切換器 css 文件。它包含 css 類。class 用於 colors。

像這樣：

顏色-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 class中有一些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 的新手。

Answer 1

將所有 styles 作為類保存在一個 css 文件中。 然后，將該 css 文件導入到 HTML 文件。 不要把 styles 放在 JS 里面。 因此，您的所有樣式類都將在一個 css 文件中。 然后，您可以在點擊功能中單獨添加您想要的樣式類。 您可以使用以下代碼添加 class。

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