使用纯 CSS 将 CSS var() 分配给另一个 CSS 元素的样式属性值？

Question

假设我有一个元素 #banner 和 font-size: 36px;，如下面的代码片段所示：

#banner {
    font-size: 36px;
    width: 100%;
    background-color: red;
    text-align: center;
}

<div id="banner">
  <h1>Hello StackOverflow!!</h1>
</div>

---

如何从#banner's css 属性font-size 检索36px 并将其分配给 css variable 以便我可以使用 calc()动态设置另一个元素的font-size 的函数，比如#someOtherBanner 到#banner's font-size 值除以说，3 从而返回12px。

---

可以在下面的代码片段中看到我正在寻找的虚拟表示：

:root {
  --bannerFontSize: #banner.font-size;
}

#banner {
    font-size: 36px;
    width: 100%;
    background-color: red;
    text-align: center;
}
#someOtherBanner {
    font-size: calc(var(--bannerFontSize) / 3); // should return 12px
    width: 100%;
    background-color: green;
    text-align: center;
}

<div id="banner">
  <h1>Hello StackOverflow!!</h1>
</div>
<hr />
<div id="someOtherBanner">
  <h1>Hello from me too, StackOverflow!!</h1>
</div>

---

我发现可能有帮助的最接近的东西是CSS attr() 函数，它从 HTML 元素中检索属性的值（可以使用它来将元素的 css 属性设置为属性，同时将 css 变量设置为属性的值）但是根据CanIUse.com，目前不兼容任何浏览器。

使用 JavaScript 或 CSS 预处理器（如 SCSS）将是小菜一碟，但 Vanilla CSS 方法是什么？

Answer 1

您可以做的一件事是简单地使用与 both 横幅中的 font-size 和辅助横幅中的 padding 相同的 CSS 变量。

看起来像这样：

:root {
  --bannerFontSize: 36px;
}

#banner {
  font-size: var(--bannerFontSize);
  width: 100%;
  background-color: red;
  text-align: center;
}

#someOtherBanner {
  padding: calc(var(--bannerFontSize) / 3);
  width: 100%;
  background-color: green;
  text-align: center;
}

<div id="banner">
  <h1>Hello StackOverflow!!</h1>
</div>
<hr />
<div id="someOtherBanner">
  <h1>Hello from me too, StackOverflow!!</h1>
</div>

请注意，在您的示例中，您有一个除以 / 3px，而您想要 / 3。