4

我很好奇在设置 CSS 变量时使用 calc() 的行为。

例子：

#test {
    --halfWidth: calc(100% / 2);
}

现在，如果#test元素 adiv是 500px 宽，我希望将--halfWidth变量设置为 250px。

但是，据我所知，var(--halfWidth)其他地方使用的代码只是放在calc(100% / 2)字符串中而不是250px. 这意味着我不能使用元素 A 的计算并稍后在元素 B 中使用它，因为它会简单地设置为例如width: var(--halfWidth);元素 B 的宽度的一半而不是元素 A 的宽度的一半，其中变量是定义。

我已经在网上搜寻了有关此行为的任何文档，但到目前为止我还是一片空白。

理想情况下，使用 calc 设置 CSS 变量应该有两种变体：

  1. 一个变体就像这个例子一样工作，只是按原样放入字符串，禁止任何字符串内变量替换。
  2. 第二个变体，其中 calc() 将产生计算结果，而不是简单地替换字符串。

如何做到这一点？我宁愿把实际的实现留给适合它的人，但一种可能性是eval()一种事情；喜欢eval(calc(100% / 2))会给结果250px。

无论如何，如果有人有任何关于这种行为的真实文档或如何让上面的示例产生结果的解决方案，我会全神贯注！

编辑：仅供参考，我已阅读https ://drafts.c​​sswg.org/css-variables/ 上的规范

4

2 回答 2

0

这是一个很难回答的问题，因为答案不会是：

这样做......然后它会工作

您面临的问题是 CSS 的正常行为。它层叠样式。如果您要实现的目标可行，那么在短时间内就会变得非常混乱。

我的意思是你可以像这样定义一个变量是多么的酷

#test {
    --halfWidth: calc(100% / 2);
}

var(--halfWidth)应该永远在哪里calc(100% / 2)。您是否注意到它始终是父元素宽度的一半？

想象一下，如果程序员在几个月内阅读您的代码并拥有一个宽度为1000pxset 的框，--halfWidth现在它很250px宽，那将是多么奇怪......我认为互联网已经坏了 :) 它应该很500px宽。

为了实现您想要的，您可以/应该定义不同var的 s 来定义父元素的宽度。并分给孩子们。

于 2016-05-23T08:12:53.550 回答
0

一种方法是动态地向CSS 对象模型( CSSOM ) 添加一行，明确声明width类的.halfwidth。

然后，这width将应用于.halfwidth该类的所有 div。

在下面的示例中，我还设置了.element-a水平调整大小，以便您可以更清楚地看到，当您更改widthof.element-a时，两个widthdiv的都按比例更改，包括div 的子级。 .halfwidth.halfwidth.element-b

工作示例：

let myStylesheet = document.styleSheets[0];
const elementA = document.getElementsByClassName('element-a')[0];
let elementAWidth = window.getComputedStyle(elementA).getPropertyValue('width');

const calculateHalfWidth = (elementAWidth) => {

  myStylesheet.insertRule('.halfWidth { width: ' + (parseInt(elementAWidth) / 2) + 'px; }', myStylesheet.cssRules.length);
}

calculateHalfWidth(elementAWidth);

// ================================================================================
// THE SCRIPT BELOW USES A ResizeObserver TO WATCH THE RESIZABLE .element-a DIV
// ================================================================================

const elementAObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    if (entry.contentRect.width !== elementAWidth) {
      calculateHalfWidth(entry.contentRect.width);
    }
  }
});

elementAObserver.observe(elementA);
body {
  font-family: sans-serif;
}

div.element {
  float: left;
  width: 200px;
  height: 100px;
  margin: 12px 3px;
  text-align: center;
  border: 1px solid rgb(0, 0, 0);
}

div.element h2 {
  font-size: 18px;
}

div.element-a {
  resize: horizontal;
  overflow: auto;
}

div.element-b {
  width: 300px;
}


div.halfWidth {
  height: 40px;
  margin: 0 auto;
  border: 1px dashed rgb(255, 0, 0);
}

div.halfWidth h2 {
  font-size: 14px;
}
<div class="element element-a">
<h2>Element A</h2>
  
  <div class="halfWidth">
    <h2>halfWidth</h2>
  </div>
  
</div>

<div class="element element-b">
  <h2>Element B</h2>
  
  <div class="halfWidth">
    <h2>halfWidth</h2>
  </div>
  
</div>

于 2020-08-31T21:56:22.250 回答