使用 data-attr 动态选择 css 自定义属性

Question

给定以下代码段：

:root{
  --warning: rgb(230, 126, 34);
  --warning-bg: rgba(230, 126, 34, 0.1);

  --important: rgb(52, 152, 219);
  --important-bg: rgba(52, 152, 219, 0.1);

  --caution: rgb(231, 76, 60);
  --caution-bg: rgba(231, 76, 60, 0.1);
}

[data-type]{
  padding: 12px;
  margin: 12px;
}

[data-type="warning"]{
  background-color: var(--warning-bg);
  border: 1px solid var(--warning);
}

[data-type="important"]{
  background-color: var(--important-bg);
  border: 1px solid var(--important);
}

[data-type="caution"]{
  background-color: var(--caution-bg);
  border: 1px solid var(--caution);
}

<div class='block' data-type='warning'>
  <span>Block: Warning</span>
</div>

<div class='block' data-type='important'>
  <span>Block: Important</span>
</div>

<div class='block' data-type='caution'>
  <span>Block: Caution</span>
</div>

我可以使用 data-type 属性从 CSS 中选择自定义属性 (var)，这样我就不必为每个 [=] 重复添加样式15=]?

The data-type property comes from an external source and the colors are always in sync with all the data-type(s)

大致如下：

[data-type]{
  background-color: var(--#{attr(data-type)}-bg);
  padding: 12px;
  border: 1px solid var(--#{attr(data-type)});
  margin: 12px;
}

NOTE: Using SASS/LESS is a no-go due to factors beyond my control.

Answer 1

如果您不反对使用一小块 Javascript 来执行必要的作业，那么这可能会引起您的兴趣。

这使用 getComputedStyle 和 getPropertyValue 检索变量，并使用 setProperty 将动态创建的样式分配给元素。

let root=document.documentElement;
let col=document.querySelectorAll('div[data-type]');
    col.forEach( n=>{
      n.style.setProperty('background-color',getComputedStyle(root).getPropertyValue('--'+n.dataset.type+'-bg') );
      n.style.setProperty('border',['1px solid',getComputedStyle(root).getPropertyValue('--'+n.dataset.type)].join(' '));
    });

:root{
  --warning: rgb(230, 126, 34);
  --warning-bg: rgba(230, 126, 34, 0.1);

  --important: rgb(52, 152, 219);
  --important-bg: rgba(52, 152, 219, 0.1);

  --caution: rgb(231, 76, 60);
  --caution-bg: rgba(231, 76, 60, 0.1);
}

[data-type]{
  padding: 12px;
  margin: 12px;
}

<div class='block' data-type='warning'>
  <span>Block: Warning</span>
</div>

<div class='block' data-type='important'>
  <span>Block: Important</span>
</div>

<div class='block' data-type='caution'>
  <span>Block: Caution</span>
</div>

使用 data-attr 动态选择 css 自定义属性

use data-attr to dynamically pick css custom property

html

css

css-variables

使用 data-attr 动态选择 css 自定义 属性

use data-attr to dynamically pick css custom property

html

css

css-variables

使用 data-attr 动态选择 css 自定义属性