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>

如何从36px css属性#banner's中检索font-size并将其分配给 css variable ，这样我可以使用 calc() 函数来动态设置另一个元素的font-size，例如将#someOtherBanner设置为#banner's font-size的值除以3，从而返回{ {1}}。

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

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;
}

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

使用JavaScript或css预处理程序（如SCSS）可算是小菜一碟，但是Vanilla CSS的方法是什么呢？

Answer 1

您可以做的一件事就是简单地使用与横幅广告中的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。

将CSS var（）分配给具有纯CSS的另一个CSS元素的样式属性值？

1 个答案: