通过点击CheckBox实现背景变换小案例

H-rosy

已于 2022-08-02 12:13:00 修改

阅读量1.1k

点赞数

分类专栏：有趣的css和JavaScript 文章标签： html 前端 css

于 2022-08-02 10:42:55 首次发布

本文链接：https://blog.csdn.net/qq_51580852/article/details/126117171

版权

有趣的css和JavaScript 专栏收录该内容

7 篇文章 4 订阅

订阅专栏

今天给大家介绍一个例子，例子是实现背景的切换的，这里通过使用input标签中的checkbox中的checked实现，我觉得还是一个不错的例子，分享给大家。

在看代码之前先介绍一些知识点:

CheckBox的伪类选择器：checked伪类仅仅适用于单选按钮或则复选框，所以如果在其他类型的元素定义checked伪类，checked会失效。

css中 ‘+’号的使用：

二者有相同的父元素，
选择紧接在另一个元素后的元素，即是相邻的选择器

总结上面两点，当checked伪类选择器和+配合使用时：+ 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。也可以理解为在为类选择器选择的时候，使用原始的input：checked+class/label（每当选中时，改变其后class/label中的内容样式）

本案例通过点击checkbox实现选择效果，点击了第一下表示选中了这个id叫modeCheckBox的多选框，此时显示黑夜，内容为月亮标记，再点一下表示取消选择，恢复为默认的太阳。

OK知识点介绍完毕，下面你们就直接copy代码去浏览器上面跑一跑吧，感受一下css的奇妙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <input id="modeCheckBox" type="checkbox"> 
    <!-- 通过点击，记住勾选和不勾选的两个状态，刚好对应浅色模式和深色模式两种状态 -->
  <div class="content">
     
      <label id="modeBtn" for="modeCheckBox">点我切换</label>
      <h1>深浅色模式切换</h1>
    
  </div>
</body>
</html> 
<style>

body,
    html {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }

    body {
      box-sizing: border-box;
    }

    .content {
      padding: 10px;
      transition: background-color 1s, color 1s;
    }

    #modeCheckBox {
       display: none; /*//将大盒子外面的checkbox隐藏起来 */
    }

    #modeCheckBox:checked+.content { 
        /* 通过 checkbox 的伪类选择器checked，点击checkbox就会触发这个伪类 */
      background-color: black;
      color: white;
      transition: all 1s;
    }

    #modeBtn {
      font-size: 2rem;
      float: right;
    }

    #modeBtn::after {
      content: '🌞';
    }

    #modeCheckBox:checked+.content #modeBtn::after {
      content: '🌜';
    }
  </style>