calc

The calc CSS function allows basic arithmetic to be performed on numerical values, using addition (+), subtraction (-), multiplication (*), division (/), and parentheses.

Syntax

CSS

calc()

Values

<calc()> =
    calc(
        <calc-sum>
    )

<calc-sum> =
    <calc-product>
    [ [ '+' | '-' ] <calc-product> ]*

<calc-product> =
    <calc-value>
    [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
    <number> |
    <dimension> |
    <percentage> |
    <calc-constant> |
    ( <calc-sum> )

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<dimension>

A number with a unit.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<calc-constant> =
    e |
    pi |
    infinity |
    -infinity |
    NaN

The base of the natural logarithm, approximately equal to 2.7182818284590452354.

pi

The ratio of a circle's circumference to its diameter, approximately equal to 3.1415926535897932.

infinity

Positive infinity.

-infinity

Negative infinity.

NaN

Not a number.

Multiplication.

Division.

Addition.

Subtraction.

Examples

1 · +

2 · -

3 · *

4 · /

5 · JS · Inline

6 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
            width: 100px;
        }
        div:nth-of-type(1)
        {
            background-image: linear-gradient(135deg, white, yellow);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="calc(100px + 10px)">+</button>
    <button value="calc(100px - 10px)">-</button>
    <button value="calc(100px * 10)">*</button>
    <button value="calc(100px / 10)">/</button>
    <div>calc</div>
    <div>calc</div>
    <div>calc</div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.width = myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(const myelement of myelements)
        {
            const myargument = myelement.value || myelement.innerHTML;
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>