尝试在点击 Jquery 时切换样式 CSS link "href"

Question

尝试在点击元素时切换暗模式

切换 div class = .dark__mode
css link class = .css-link
css link href 变量 = style__old

我正在学习jquery，我认为代码的推理和结构存在重大问题

link href 开始变了，但不会变回来

请帮忙，或者如果使用复选框选项更好

window.onload = function(){

    var  style__old = $(".css-link").attr("href");

    $(".dark__mode").click(function(){

            if (style__old == "css/style.css"){
                var style__new = style__old.replace("style.css","dark-mode.css");
                $(".css-link").attr("href", style__new);
            }
            else
            if (style__old == "css/dark-mode.css"){
                style__old.replace("dark-mode.css","style.css");
                $(".css-link").attr("href", "style__old");
            }
    }

);}

Answer 1

您使用的动态更改加载样式表的方法不是很可靠。

更好的方法是将所有相关样式放在页面中，在单独的样式表中，然后 toggle() 一个 class 在低级元素上，例如 body，然后将所有选择器挂在上面。

实际上它看起来像这样：

jQuery($ => {
  $('.dark__mode').on('click', (e) => {
    e.preventDefault();
    $('body').toggleClass('dark');
  })
});

/* Normal layout */
div { color: #0C0; }
a { color: #C00; }

/* Dark layout */
body.dark {
  background-color: #333;
  color: #FFF;
}
body.dark div { color: #CCC; }
body.dark a { color: #CC0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="dark__mode">Toggle</a>
<div>
  <p>Lorem ipsum dolor sit</p>
  <a href="#">Amet consectetur adipcing elit</a>
</div>

尝试在点击 Jquery 时切换样式 CSS link "href"

Trying to toggle style CSS link "href" on click Jquery

css

jquery

href

toggle