CSS's custom attribute var and JS's classList.toggle() method, use in detail (how to apply var variable in css)

Introduction: var (variable) in CSS is a new feature in CSS3, which is used to define reusable values, similar to variables in programming languages; it allows you to define a value in the entire CSS file and use it when needed value. This can make CSS more flexible and easy to maintain; the classList.toggle() method is used in detail, and there are examples below.

Here we use var variable and classList.toggle() method to implement a function of switching theme background,

The effect is as follows:

1. First define the html element and set the style;

<body>

  <div class="index_box">
    <div class="btn_circle"></div>
  </div>

</body>


html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

//这里使用css的var定义变量: --dark-plum-bg  ， white是默认值
body {
  background-color: var(--dark-plum-bg, white);
}

//这里定义一个类名，然后给变量--dark-plum-bg赋值
//哪个元素有该类名且调用了该类名下的自定义属性，哪个元素效果就会生效
.dom-style {
  --dark-pink-bg: pink;
  --dark-plum-bg: plum;
}

//拥有这个类名，元素就会向右移动40px（按钮里面的圆）
.mode-switch-off {
  transform: translate(40px);
}

.index_box {
  width: 90px;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(to right, yellowgreen, #8080ff);
  border-radius: 20px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0px 10px;
  box-shadow: 0px 0px 12px silver;
  .btn_circle {
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 20px;
    transition: all 0.3s linear;
  }
}

2. After preparing the text and style, use JS to control the button and theme color change;

这里获取到按钮元素后，添加一个点击事件  
document.querySelector(".index_box").addEventListener("click", function () {

    这里获取按钮里面的白色元素，
    通过classList.toggle()方法判断该元素是否有mode-switch-off这个类名，
    如果有就移除，没有就就添加
    this.querySelector(".btn_circle").classList.toggle("mode-switch-off");

    最后还是通过classList.toggle()方法判断body元素是否有dom-style类名，
    有的话自然就会变成该元素下的背景色
    document.body.classList.toggle("dom-style");

})

3. You may be unfamiliar with the classList.toggle() method here . Here is a brief introduction to the meaning and usage details of this method;

The classList.toggle() method introduces:

1. classList.toggle() is a method used in JavaScript to switch the class name of HTML elements.

2. It can add a class name, delete a class name or delete it when the class name exists, and add it when it does not exist. In layman's terms, when using this method, the element will be removed if it has the class name, and it will be added if it does not.

Here is a simple example, the usage is as follows:

Example 1:

1. First, get the HTML element that needs to be operated:

let element = document.getElementById("example");

2. Then, use the toggle() method to switch the class name:

element.classList.toggle("active");

3. This will remove the class name "active" if it exists and add it if it doesn't.

Example 2:

1. It is assumed here that we have a button that can switch its style when it is clicked. First, we need to define two class names in CSS, one is the default style and the other is the active style:

CSS:

.btn { background-color: #ccc; color: #000; } 

.btn.active { background-color: #000; color: #fff; }

2. Then, we need to add a button to the HTML:

HTML:

<button id="myBtn" class="btn">Toggle</button>

3. Finally, add an event listener in JavaScript, and call the toggle() method to switch the class name when the button is clicked:

JS:

let btn = document.getElementById("myBtn"); 

btn.addEventListener("click", function() { this.classList.toggle("active"); });

4. Now, every time the button is clicked, its style will switch.

Example 2 effect:

Speaking of this, let's go back to the above case of switching the background through the var variable, which is easier to understand.