Question

我试图在我的页面上添加类似“黑暗模式”的内容。我在网上找到了一个很好的切换开关，当点击激活一个复选框时，我如何使用盒子的选中状态来改变我的CSS？

HTML：

    <body>
    <div class="switch">
    <input id="cmn-toggle-4" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
    <label for="cmn-toggle-4"></label>
    </div>
    <div id= "lbox">
    </div>
    <div id="text1">
        <p>text</p>
    </div>
    <div id="text2">
        <p>text</p>
    </div>
</body>

我想改变lbox的颜色和身体的背景颜色。我试过了：

input.cmn-toggle-round-flat:checked + #lbox {
color:#ffffff;
}

这似乎只能改变切换css的部分而不是在那之外。无论如何，我可以使用纯CSS进行此操作，还是必须以某种方式使用javascript？谢谢。

Answer 1

Css用于造型..如果你有一些逻辑，你必须调用Mr Javascript（jQuery）;）

很容易。我刚做了一个小片段。希望它有所帮助

$(document).ready(function(){
  
  $('#cmn-toggle-4').click(function(){
    if($(this).is(":checked")){
      $('.wrap').css('background','black');
      $('p').css('color','white');
    }else {
      $('.wrap').css('background','white');
      $('p').css('color','black');
    }
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
    <div class="switch">
    <input id="cmn-toggle-4" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
    <label for="cmn-toggle-4"></label>
    </div>
    <div id= "lbox">
    </div>
    <div id="text1">
        <p>text</p>
    </div>
    <div id="text2">
        <p>text</p>
    </div>
</div>

根据复选框css

1 个答案: