当前位置：首页 > 行业动态 > 正文

如何在CSS和JS中高效使用变量？

admin
行业动态
2025-01-27
5

### ，，CSS变量（Custom Properties for Cascading Variables）是级联变量的CSS自定义属性，通过–前缀声明，使用var()函数引用。它允许开发者定义可复用的变量值，在整个样式表中使用，增强了样式的模块化和一致性。 CSS变量可以在任何元素内定义，作用域遵循CSS的层叠和作用域规则。与预处理器中的变量不同，CSS变量是运行在浏览器中的动态CSS属性，无需编译即可直接运行。

CSS变量

1、定义：CSS变量也称为自定义属性，是一种在CSS中定义和使用的值，可以在整个样式表中重复使用，它们提供了一种灵活的方式来存储和管理样式中的值，使得样式的修改更加简单和可维护。

如何在CSS和JS中高效使用变量？第1张

2、语法：在CSS中，使用–前缀来定义变量，变量的命名可以由字母、数字、破折号和下划线组成，但必须以字母开头，变量的定义通常放在选择器的规则集内，或者在根元素（:root）中定义，以便全局使用。

   :root {
     --primary-color: #ff0000;
     --font-size: 16px;
   }

3、使用方法：使用变量时，需要使用var()函数将变量包裹起来，变量可以在任何可以使用CSS属性值的地方使用，例如颜色、尺寸、边距等。

   .element {
     color: var(--primary-color);
     font-size: var(--font-size);
   }

4、动态修改：变量的值可以在CSS中动态修改，以实现样式的变化，可以通过JavaScript或使用伪类（如:hover、:focus等）来修改变量的值。

   .element:hover {
     --primary-color: #00ff00;
   }

或者使用JavaScript来修改变量的值：

   document.documentElement.style.setProperty('--primary-color', '#00ff00');

5、命名规范：为了避免与现有的CSS属性冲突，CSS变量应该遵循一定的命名规范，常见的规范包括使用有意义的名称、小写字母和连字符、命名空间以及避免缩写和简写。

JS变量

1、定义：在JavaScript中，变量是用于存储数据的容器，变量声明关键字有var、let和const三种。

2、var关键字：var声明的变量具有函数作用域，这意味着它们在整个函数内部都是可见的，var声明的变量可以被重新赋值，但不建议这样做，因为这可能会导致意外的行为。

   function exampleVar() {
     var x = 10;
     if (true) {
       var y = 20;
       console.log(x); // 输出 10
       console.log(y); // 输出 20
     }
     console.log(x); // 输出 10
     // console.log(y); // 报错：y is not defined
   }

3、let关键字：let声明的变量具有块级作用域，只在其所在的代码块内有效，let声明的变量不能被重新赋值，否则会抛出错误。

   function exampleLet() {
     let x = 10;
     if (true) {
       let y = 20;
       console.log(x); // 输出 10
       console.log(y); // 输出 20
     }
     // console.log(y); // 报错：y is not defined
   }

4、const关键字：const声明的变量也具有块级作用域，并且其值一旦被初始化就不能再改变，const声明的变量必须立即初始化，否则会抛出错误。

   const PI = 3.14;
   console.log(PI); // 输出 3.14
   // PI = 1.5; // 报错：Assignment to constant variable.

5、类型转换：JavaScript是一种动态类型语言，变量的类型是运行时确定的，在某些情况下，可能需要显式地将变量转换为不同的类型。

   let num = 123;
   let str = String(num); // 将数字转换为字符串
   let bool = Boolean(num); // 将数字转换为布尔值
   console.log(str); // 输出 "123"
   console.log(bool); // 输出 true

6、生命周期：全局变量的生命周期从声明开始，直到程序结束，函数内部的局部变量的生命周期从函数调用开始，到函数执行结束。

   let globalVar = "I am global";
   function exampleLifetime() {
     let localVar = "I am local";
     console.log(localVar); // 输出 "I am local"
   }
   exampleLifetime();
   // console.log(localVar); // 报错：localVar is not defined
   console.log(globalVar); // 输出 "I am global"

7、提升机制：var声明的变量会被提升到函数或全局作用域的顶部，但不会被初始化，let和const声明的变量不会被提升。

   console.log(hoistedVar); // 输出 undefined
   var hoistedVar = "I am var";
   console.log(hoistedVar); // 输出 "I am var"
   console.log(letConstVar); // 报错：letConstVar is not defined
   let letConstVar = "I am let";
   console.log(letConstVar); // 输出 "I am let"

8、命名规则：变量名必须以字母、$或_开头，后续字符可以是字母、数字、$或_，变量名区分大小写，且不能包含空格或其他标点符号。

   let validVar = "I am valid";
   // let invalid Var = "I am invalid"; // 报错：Invalid or unexpected token
   // let 2invalidVar = "I am also invalid"; // 报错：Invalid or unexpected token