CSS 计算中忽略的数据属性

Question

我正在尝试根据 html 代码中的指定数据属性动态计算div 的宽度，如下所示。

<div class="Mlink-group" data-linkGroupWidth="2">
content
</div>

通过 css，我想计算这个元素的宽度。基本上，我将基本宽度(宽度计算中的前两个变量(乘以数据属性中指定的数字(在本例中为 2(的倍数。

:root{
--linkMargin: 1px;
--linkwidth: calc(var(--linkBaseWidth) + (100vw - var(--CatBaroffset) - var(--linkCount) * (var(--linkBaseWidth) + (var(--linkMargin) * 2))) / var(--linkCount));
}
.Mlink-group{ /*MLink-items parent*/
/* some other css styling here*/
width: calc(var(--linkwidth) + var(--linkMargin) * attr(data-linkGroupWidth, number));
}

这样做的结果是宽度等于div 的内容宽度，而在此示例中，它应该是内容宽度的两倍。当我删除attr(data-linkGroupWidth, number)并将其替换为固定数字(如 2(时，代码就可以工作了。

有人看到我做错了什么吗？

Answer 1

我有一个类似问题的答案，可以帮助您解决这个问题。

首先，您使用attr(data-linkGroupWidth, number)的位置不正确。如果尝试指定属性值应为数字，则需要删除逗号。如果属性值无效，逗号后的值是回退值。根据规格：

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )

但是，即使删除逗号也无法解决您的问题，因为此用途当前不支持数据属性。为了实现您想要完成的任务，我们需要使用自定义属性而不是数据属性。因此

<div class="Mlink-group" data-linkGroupWidth="2">
content
</div>

需要更改为

<div class="Mlink-group" style="--data-linkGroupWidth:2;">
content
</div>

和

:root{
--linkMargin: 1px;
--linkwidth: calc(var(--linkBaseWidth) + (100vw - var(--CatBaroffset) - var(--linkCount) * (var(--linkBaseWidth) + (var(--linkMargin) * 2))) / var(--linkCount));
}
.Mlink-group{ /*MLink-items parent*/
/* some other css styling here*/
width: calc(var(--linkwidth) + var(--linkMargin) * attr(data-linkGroupWidth, number));
}

成为

:root{
--linkMargin: 1px;
--linkBaseWidth: < Needs to be declared first before --linkWidth can use its value as css is cascading and can't reference something that is further down in the file
--catBarOffset: < Also needs to be declared first
--linkCount: < Also needs to be declared first
--linkWidth: calc(var(--linkBaseWidth) + (100vw - var(--catBarOffset) - var(--linkCount) * (var(--linkBaseWidth) + (var(--linkMargin) * 2))) / var(--linkCount));    
}
.Mlink-group {
width: calc((var(--linkWidth) + var(--linkMargin)) * var(--data-linkGroupWidth));
}

我修改了您的 Mlink 组 css 中的宽度计算，因为我认为这就是您要计算的内容。使用 css calc(( 时，请始终记住 PEMDAS——数学计算的操作顺序。首先是括号，然后是指数，然后是乘法和除法，最后是加法和减法。您还应该尝试在类和变量的大小写和命名结构中保持一致，以免在路上遇到错误。

这将为你提供你正在寻找的结果，假设你的所有变量和计算都是正确的。