在 css calc 函数中使用模数

Posted 2023-03-06

【中文标题】在 css calc 函数中使用模数

【英文标题】：Using modulus in css calc function

【发布时间】：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点？

【参考方案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) `);