如何做一个类名变量和字符串反应 - Javascript

在 Javascript 中，我们有时需要根据一些条件来动态地控制 CSS 类名的添加或删除，这时候就需要使用类名变量和字符串反应了。

类名变量

我们可以定义一个变量来存放某个 CSS 类名，然后在需要添加或删除类名的时候使用该变量。

const className = 'active';

// 添加类名
element.classList.add(className);

// 删除类名
element.classList.remove(className);

使用类名变量的好处是，我们可以避免在多个代码段中重复写相同的类名字符串，减少出错的可能性，并且如果稍后需要更改类名，只需要在一个地方修改即可。

字符串反应

另外一个常用的技巧是使用字符串反应来根据一些条件动态地生成 CSS 类名。

const isActive = true;

// 使用字符串反应动态生成类名
const className = `button ${isActive ? 'active' : ''}`;

// 添加类名
element.classList.add(className);

在上面的例子中，我们通过字符串反应使用了一个三目运算符来动态生成类名，如果 isActive 为 true，则添加 'active' 类名，否则添加一个空字符串，即不添加任何类名。

使用字符串反应的好处是可以根据动态条件快速生成类名，并且代码更加简洁易懂。当然，在使用字符串反应时，需要注意字符串拼接格式的正确性，尤其要注意避免 XSS 攻击等安全问题。

总之，通过使用类名变量和字符串反应，我们可以动态地控制 CSS 类名，让我们的 Javascript 代码更加简洁、易读，并且更加灵活地应对各种动态变化的场景。