snshl9db69ccu1aikl9r
snshl9db69ccu1aikl9r

通过 CSS自定义属性（CSS变量）和 JavaScript 实现

640?wx_fmt=jpeg

原文链接 | https://www.sitepoint.com/css-theming-custom-properties-javascript/

在本教程中，我们将使用 CSS自定义属性（也称为CSS变量）来为简单的HTML页面实现主题切换。 我们将创建暗黑和明亮的示例主题，然后编写JavaScript 以在用户单击按钮时在两者之间切换。

如果你以前没接触过，请先阅读CSS变量(自定义属性)实用指南及注意事项这篇文章

就像在典型的编程语言中一样，变量用于保存或存储值。 在CSS中，它们通常用于存储颜色，字体名称，字体大小，长度单位等。然后可以在样式表中的多个位置引用和重用它们。 大多数开发人员都会引用 “CSS变量” ，但官方名称是 自定义属性。

CSS自定义属性可以修改可在整个样式表中引用的变量。 以前，只有使用Sass等CSS预处理器才能实现这一点。

理解 :root 和 var()


在创建动态主题示例之前，让我们了解自定义属性的基本基础知识。

自定义属性 是一个名称以两个连字符（ - ）开头的属性，如 --foo。 定义后可以使用 var() 引用的变量。 让我们考虑这个例子：

CSS 代码:

 
   
     
    
  1. :root {
    2.  
    
  2.   --bg-color: #000;
    3.  
    
  3.   --text-color: #fff;
    4.  
    
  4. }
    5.  
   
 
   
在:root选择器中定义自定义属性意味着它们可以作用于全局文档中所有元素。:root是一个CSS伪类，它匹配文档的根元素 – 元素。它类似于 html 选择器，但具有更高的优先级。
 
   
您可以在文档中的任何位置访问 :root 中的自定义属性的值：
 
   
CSS 代码:
 
   
 
   
     
    
  1. div {
    2.  
    
  2.   color: var(--text-color);
    3.  
    
  3.   background-color: var(--bg-color);
    4.  
    
  4. }
    5.  
   
 
   
您还可以在CSS变量中包含回退值。例如：
 
   
CSS 代码:
 
   
 
   
     
    
  1. div {
    2.  
    
  2.   color: var(--text-color, #000);
    3.  
    
  3.   background-color: var(--bg-color, #fff);
    4.  
    
  4. }
    5.  
   
 
   
如果未定义自定义属性，则使用其回退值代替。
 
   
除了 :root 或 html 选择器之外的CSS选择器内定义的自定义属性使变量可用于匹配元素及其子元素。
 
   
CSS自定义属性与预处理器变量
 
   
 
   

 
   
诸如 Sass 之类的CSS预处理器通常用于辅助前端Web开发。预处理器的其中一个有用功能就包括变量。但是Sass变量和CSS自定义属性之间有什么区别？
 
   
     
    
  • CSS自定义属性在现代浏览器中进行本机解析。 预处理器变量需要编译到标准CSS文件中，并且所有变量都转换为值。
    •  
    
  • JavaScript可以访问和修改自定义属性。 预处理程序变量编译一次，只有它们的最终值在客户端上可用。
    •  
   
 
   
 
   
编写一个简单的HTML页面
 
   
 
   

 
   
让我们从为项目创建一个文件夹开始：
 
   
BASH 代码:
 
   
 
   
     
    
  1. $ mkdir css-variables-theming
    2.  
   
 
   
接下来，在项目的文件夹中添加一个 index.html 文件：
 
   
BASH 代码:
 
   
 
   
     
    
  1. $ cd css-variables-theming
    2.  
    
  2. $ touch index.html
    3.  
   
 
   
并添加以下内容：
 
   
HTML 代码:
 
   
 
   
     
    
  1.  class="navbar">Title
    2.  
    
  2.  class="container">
    3.  
    
  3.   
    4.  
    
  4.      type="button" value="Light/Dark" id="toggle-theme" />
    5.  
    
  5.   
 
    
  •      class="title">What is Lorem Ipsum?
    •  
    
  •      class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry...
    •  
    
    •  
    
    •  
    
  •   Copyright 2018
    •  
    
    •  
    
   
    我们使用