在 css calc 函数中使用模数答案

【问题标题】：Using modulus in css calc function在 css calc 函数中使用模数
【发布时间】：2016-03-29 20:49:51
【问题描述】：

有没有办法在 css calc 函数中使用或实现模运算符？
我知道有 mod 运算符并且 IE 支持它，但是其他浏览器呢？

例如

#element-id{
     width: calc( 100%  mod 5 );
}

【问题讨论】：

没办法.. 如果您通过 PHP 服务器提供 html 文件（例如），请将样式放在 html 标记中。这样你就可以计算了。
100% mod 5 到底是什么？ 100 mod 5 将始终为零-但我认为您希望在“mod 5”发生之前将 100% 转换为像素.. 例如，如果它是 304 像素宽，那么在 mod 之后宽度将变为 4px 5点？

标签： css css-calc

【解决方案1】：

简单地说……“不”。

MDN

表达式可以是任何简单的表达式，结合以下运算符，使用标准运算符优先规则：

+ 加法。

- 减法。

* 乘法。至少有一个参数必须是<number>。

/ 除法。右侧必须是<number>。

【讨论】：

【解决方案2】：

恐怕只有 Internet Explorer 支持 mod 功能，而且一直是dropped from the CSS spec，所以其他浏览器不太可能很快支持它。

【讨论】：

你有没有IE支持或支持mod功能的参考？现在好像不行了。
很遗憾没有。对不起。我什至不记得我指的是哪个版本：-/
那太糟糕了。如果您找到或记得，请发布。

【解决方案3】：

很遗憾，recent specs 中不再提及 mod 运算符。

calc() 函数允许将带有加法 (+)、减法 (-)、乘法 (*) 和除法 (/) 的数学表达式用作分量值。

您可能想求助于使用 javascript 来实现这种行为。

var el = document.getElementById('element-id');
el.style.width = (100 % 5) + '%';

【讨论】：

【解决方案4】：

浏览器不再支持此运算符。 您只能将 标准操作与 calc 一起使用：

添加+
减法-
乘法*
部门/

此calc() article 提供了对该功能的进一步详细说明。

【讨论】：

【解决方案5】：

如果您动态生成 CSS，我创建了一个小类来执行简单的函数，例如 abs()、ceil()、floor()、mod() 和 sign()——它可以用来构建复杂的计算规则您可以将其作为参数传递给彼此。如果您使用“var(--my-variable)”作为参数，则将使用 CSS 变量。注意：它最适用于原始数字，并且有一个实用函数 toUnit 可以在最后转换为像素（等）。

可以这样调用，以jquery为例来设置样式：

 $('#my-element').css('width', `${cssHack.toUnit(cssHack.mod(254,25),'px')}`)

下面是类的代码（es6，无依赖）：

class cssHack
{
    //primary used for dynamic css variables-- pass in 'var(--dynamic-height)'
    static toUnit(val,unit)
    {
        unit='1'+unit;
        return ` calc(${val} * ${unit}) `;
    }

    static round(val)
    {
        // the magic number below is the lowest possible integer, causing a "underflow" that happily results in a rounding error we can use for purposeful rounding.
        return ` calc(${val} * ${Number.MIN_VALUE} / ${Number.MIN_VALUE}) `;
    }

    static abs(val)
    {
        return ` max(${val}, calc(${val} * -1)) `;
    }

    static floor(val)
    {
        return cssHack.round(` calc(${val} - .5) `);
    }

    static ceil(val)
    {
        return cssHack.round( `calc(${val} + .5) `);
    }

    static sign(val)
    {   
        let n = ` min(${val},0) `; //if val is positive then n =0. otherwise n=val.
        let isNegative= ` min(${cssHack.ceil(cssHack.abs(n))},1) `;
        let p = ` max(${val},0) `; //if val is negative then n=0, otherwise n = val;
        let isPositive= ` min(${cssHack.ceil(cssHack.abs(p))},1) `;
        return ` calc(${isPositive} + calc(${isNegative} * -1)) `;
    }

    static mod(val, base)
    {
        let abs = cssHack.abs(val);
        let div = ` calc(${abs} / ${base})`;
        let dec = ` calc(${div} - ${cssHack.floor(div)})`;
        return cssHack.round(` calc(${dec} * ${base}) `);
    }
}

【讨论】：