How to use the calc () function with js?

1

I need to decrease%% of% of% with javascript .style

Attempts:

circulo[0].style.left = "calc(100%" + "-90px)";

circulo[0].style.left = "calc(" + 100 +"%" + "-20px)";
    
asked by anonymous 18.09.2018 / 23:26

1 answer

2

The function calc() must have a space before and after the operator:

calc(valor1 - valor2)
           ↑ ↑

In your case, these concatenations are unnecessary. Must use concatenation when the value used is dynamic represented by some variable, not fixed values. And yet, its concatenation would result in an invalid property value:

"calc(" + 100 +"%" + "-20px)"; would "calc(100%-20px)";

See that the spaces before and after the - operator are missing.

The correct one would be:

circulo[0].style.left = "calc(100% - 20px)";
  

Remembering that to move the element with the left property, the   element must have a position other than static (default):

position: relative ou fixed ou absolute;

Example:

var circulo = document.getElementsByClassName("circulo");
circulo[0].style.left = "calc(100% - 50px)";
.circulo{
   width: 100px;
   height: 100px;
   background: red;
   position: relative;
}
<div class="circulo"></div>

Note that in the example above,% w / w% w /% w / w is with w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w to half of div .

    
19.09.2018 / 00:34