如何根据CSS变量的内容执行相应样式操作？

你定义的CSS变量如下：

div {
  --test: "hey"
}

想要实现类似if/else的条件样式逻辑，原生CSS本身并没有直接的字符串比较语法，但可以通过以下两种方式实现需求：

方法一：HTML属性配合CSS选择器 #

把CSS变量的值同步到HTML的data-*属性上，然后用属性选择器做判断：

<div data-test="hey"></div>

/* 当data-test等于"Hi"时应用的样式 */
div[data-test="Hi"] {
  margin-left: 1rem;
}
/* 其他情况应用的样式 */
div:not([data-test="Hi"]) {
  padding-bottom: 1rem;
}

这种方式需要保证HTML的data-test属性和CSS变量--test的值保持一致，适合静态场景。

方法二：用JavaScript动态判断 #

如果CSS变量的值是动态变化的，或者不想修改HTML结构，可以用JS读取变量值并设置样式：

document.querySelectorAll('div').forEach(div => {
  // 获取计算后的CSS变量值，注意去掉首尾空格
  const testVal = getComputedStyle(div).getPropertyValue('--test').trim();
  // 变量定义时带引号，判断要匹配带引号的字符串
  if (testVal === '"Hi"') {
    div.style.marginLeft = '1rem';
  } else {
    div.style.paddingBottom = '1rem';
  }
});

这种方式更灵活，能处理变量动态变化的场景。

内容的提问来源于stack exchange，提问作者Hostek