css - 在 css calc 函数中使用模数

Question

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

例如

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

Answer 1

不幸的是，在最近的规范中不再提及mod运营商。

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

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

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

Answer 2

简单地说……“不”。

MDN

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

+添加。

-减法。

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

/分配。右手边必须是<number>.

Answer 3

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

• 加法+
• 减法-
• 乘法*
• 师/

这篇calc() 文章对该函数提供了更详细的解释。

Answer 4

恐怕只有 Internet Explorer 支持 mod 功能，而且它已从 CSS 规范中删除，因此其他浏览器不太可能很快支持它。

Answer 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}) `);
    }
}

Answer 6

嗯，它支持 4 件事；/, *, +, -. 我们只需要一些数学。

让我们试试，10 除以 5。 要得到余数，我们需要从“被除数”中减去“除数和商的乘积”。10 / 5会给我们商数，这足以让我们解决问题。

--dividend = 10;
--divisor = 5;

// 10 - (5 * (10 / 5))
// 10 - (5 * 2)
// 10 - 10
// 0

让我们用 15 除以 2 再试一次。

--dividend = 15;
--divisor = 2;

// 15 - (2 * (15 / 2))
// 15 - (2 * 7)
// 15 - 14
// 1

所以，会是这样的……

calc(var(--dividend) - (var(--divisor) * (var(--dividend) / var(--divisor))));

仅供参考，+运算-符必须被空格包围。但在运算符前后使用空格是一个好习惯。请参阅此处了解更多信息。