javascript - 可以处理 CSS 变量吗？

Question

我的代码带有一个CSS变量，我们称之为--element-padding，它允许多个值，例如8px 0 12px 79px，这个变量位于我拥有的Web组件中，它是被第三方使用。

我在我的 web 组件 CSS 中使用它

padding: var(--element-padding, '0');

此变量允许我的用户在设计组件样式时覆盖声明它的填充

.awesome-component {
   --element-padding: 8px 0 12px 79px;
}

现在我发现我需要处理它，因为我只需要另一种样式的 padding-top 。

一种选择是将 --element-padding 更改为 4 个不同的变量

--element-padding-top
--element-padding-right
--element-padding-bottom
--element-padding-left

但是这样，用户就必须更改代码来适应新的变量，造成很多麻烦。

有什么方法可以获取这个变量并在 var() CSS 函数中使用它之前进行某种拆分计算吗？这样我就可以获得变量的第一个位置，而无需告诉用户更改其实现。

(代码和解释是一个简化的代码，不适合实际情况，但重点是将包含 4 个度量的变量拆分为 4 个不同的变量，而不需要在用户端添加/修改变量/根)

Answer 1

原答案在底部👇🏻👇🏻👇🏻

我想我明白您希望允许您的消费者继续使用 --element-padding CSS 变量，并且您希望从中导出各个上/右/下/左值可以自定义 --element-padding 但您将在以后的开发中使用各个属性。

您可以读取 CSS 变量:

getComputedStyle(document.documentElement).getPropertyValue('--element-padding')

并设置它们:

document.documentElement.style.setProperty('--element-padding-top', '8px')

把它们放在一起:

const updatePadding = () => {

  let elementPadding = getComputedStyle(document.documentElement)
    .getPropertyValue('--element-padding'); // "8px 0 12px 79px";

  let [top, right, bottom, left] = elementPadding.trim().split(/\s+/);

  const docStyle = document.documentElement.style;
  docStyle.setProperty('--element-padding-top', top);
  docStyle.setProperty('--element-padding-right', right);
  docStyle.setProperty('--element-padding-bottom', bottom);
  docStyle.setProperty('--element-padding-left', left);

};

updatePadding();

:root {
  --element-padding: 8px 0 12px 79px;
  /* Default values but will overridden by updatePadding() */
  --element-padding-top: 8px;
  --element-padding-right: 0;
  --element-padding-bottom: 12px;
  --element-padding-left: 79px;
}

原始答案

你应该换个 Angular 思考。与其拆分 --element-padding 为什么不声明各个变量，然后使用它们来创建一体化 CSS 变量。

::root {
  --element-padding-top: 8px;
  --element-padding-right: 0;
  --element-padding-bottom: 12px;
  --element-padding-left: 79px;
  --element-padding: var(--element-padding-top) var(--element-padding-right) var(--element-padding-bottom) var(--element-padding-left);
}

您仍然可以像以前一样使用原始变量。

  padding: var(--element-padding, '0');