CSS变量的应用

猫猫村晨总2024-05-25 14:11

开篇

今天在学东西的时候看到了CSS变量的应用。简单来说，CSS变量，也称为CSS自定义属性，是一种允许开发者定义并重复使用的值的机制。它们以 -- 开头，可以在整个样式表中使用，并通过 var() 函数引用。

话不多说，请看下面的例子。

主题切换代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root {
      --background-color: #f0f0f0;
      --text-color: #333;
    }

    .dark-theme {
      --background-color: #333;
      --text-color: #f0f0f0;
    }

    div {
      width: 100%;
      height: 100vh;
      background-color: var(--background-color);
      color: var(--text-color);
    }

  </style>
</head>
<body>
  <button class="btn">切换主题</button>
  <div id="myDiv">测试</div>

  <script>
    let btn = document.querySelector('.btn')
    let myDiv = document.querySelector('#myDiv')

    btn.addEventListener('click', () => {
      myDiv.classList.toggle('dark-theme')
    })
  </script>
</body>
</html>

注

以上便是CSS变量的简单应用，希望对您有所帮助。