如何根据 CSS 变量内容做一些事情？答案

【问题标题】：How to do something based on CSS variable content?如何根据 CSS 变量内容做一些事情？
【发布时间】：2022-09-27 22:51:22
【问题描述】：

假设我有一个 CSS 变量：

div {
  --test: \"hey\"
}

我想检查一下这个变量里面有什么，并在此基础上做一些事情。

例如：

if var(--test) == \"Hi\":
  margin-left: 1rem;
else:
  padding-bottom: 1rem;

标签： css css-variables

【解决方案1】：

本机是不可能的，但是使用 css 编译器可以！

我建议您为此使用SASS/SCSS：

https://sass-lang.com/（是一个 CSS 编译器，可以让您以一种舒适的方式编写 CSS，然后将其编译（翻译）为原生 CSS）

对于使用 IF/ELSE，请参阅这些文档https://sass-lang.com/documentation/at-rules/control/if

【讨论】：

我如何将它与 css 变量一起使用？
@Hostek 是的，但是语法不同。一个 sass 变量是 $name 在 CSS 本机中是 --name
不要发布代码、数据、错误消息等的图像。- 将文本复制或输入到问题中。

【解决方案2】：

我想检查这个变量里面有什么，并在此基础上做一些事情。

是的，您可以检查 a 的值CSS 自定义属性本机使用：

window.getComputedStyle(myDiv).getPropertyValue('--test')

一旦您知道--test 的值，您就可以更新一个（或多个）属性：

myDiv.style.setProperty('padding-bottom', '1rem');

或者您可以添加一个更新myDiv 的一个属性（或任意数量的属性）的类：

myDiv.classList.add('increaseBottomPadding');

工作示例：

const divs = document.querySelectorAll('div');

divs.forEach((div) => {

  let testValue = window.getComputedStyle(div).getPropertyValue('--test');
  
  switch (testValue) {
    case ('rainbow1') : div.classList.add('background1'); break;
    case ('rainbow2') : div.classList.add('background2'); break;
    case ('rainbow3') : div.classList.add('background3'); break;
    case ('rainbow4') : div.classList.add('background4'); break;
  }
});

div {
  display: inline-block;
  float: left;
  width: 120px;
  height: 120px;
  margin-right: 12px;
  background-color: rgb(255, 0, 0);
  border: 8px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}

.div1 {
  --test: rainbow1;
}

.div2 {
  --test: rainbow2;
}

.div3 {
  --test: rainbow3;
}

.div4 {
  --test: rainbow4;
}

.background1 {
  background-color: rgb(255, 0, 0);
}


.background2 {
  background-color: rgb(255, 127, 0);
}


.background3 {
  background-color: rgb(255, 255, 0);
}


.background4 {
  background-color: rgb(0, 127, 0);
}

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

【讨论】：