The calc CSS function allows basic arithmetic to be performed on numerical values, using addition (+), subtraction (-), multiplication (*), division (/), and parentheses.
<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 e 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.
<!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);
width: calc(100px - 10px);
}
</style>
</head>
<body>
<div>-</div>
<div>-</div>
<div>-</div>
</body>
</html>
<!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);
width: calc(100px * 10);
}
</style>
</head>
<body>
<div>*</div>
<div>*</div>
<div>*</div>
</body>
</html>
<!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);
width: calc(100px / 10);
}
</style>
</head>
<body>
<div>/</div>
<div>/</div>
<div>/</div>
</body>
</html>
<!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 onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(value)" value="calc(100px + 10px)">+</button>
<button onmouseover="myfunction(value)" value="calc(100px - 10px)">-</button>
<button onmouseover="myfunction(value)" value="calc(100px * 10)">*</button>
<button onmouseover="myfunction(value)" value="calc(100px / 10)">/</button>
<div>calc</div>
<div>calc</div>
<div>calc</div>
<script>
function myfunction(myparameter)
{
document.querySelector("div").style.width = myparameter;
}
</script>
</body>
</html>
<!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>