NickC NickC - 3 days ago 6
CSS Question

Can I use CSS 'calc' withing Javascript

Can I use the css 'calc' function when setting positions in Javascript?

ePopup.style.top = "calc(100px - 1.5em);"

Answer

Yes, calc() will work when setting styles in javascript.

Working Example:

var innerDiv = document.getElementsByClassName('inner-div')[0];

function growInnerDiv() {
innerDiv.style.width = 'calc(100% + 224px)';
}

innerDiv.addEventListener('click', growInnerDiv, false); 
.outer-div {
display: inline-block;
width: 200px;
height: 100px;
padding: 12px;
border: 1px solid rgb(255,0,0);
background-color: rgb(255,255,0);
}

.inner-div {
width: 100px;
height: 100px;
background-color: rgb(255,0,0);
cursor: pointer;
transition: all 0.5s linear;
}
<div class="outer-div">
<div class="inner-div"></div>
<div>

Comments