How to use the function Calc() with js?

Asked

Viewed 166 times

1

I need to decrease 20px of 100% with the javascript . style

Attempts:

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

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

  • That one calc is CSS,See the documentation - MDN, also has a tutorial on the site of Maujor

  • I’m trying to do a range with two buttons to search by age. no uijquery searched the net but I found nothing that worked on my site

  • 2

    Why are you concatenating? Have you tried "calc(100% - 20px)"?

  • I was going to say what @sam said, see: http://jsfiddle.net/0ek397qd/6

1 answer

2


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

calc(valor1 - valor2)
           ↑ ↑

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

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

See missing spaces before and after the operator -.

The right thing would be: 

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

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

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>

See that in the example above, the div of 100px is with left of 100% (which would make her stay off the screen) but has a recoil of 50px (half), with half of 50px.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.