我可以在Javascript中使用CSS calc吗？

在JavaScript中设置位置时，是否可以使用css

calc（）

函数

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

是的，

calc（）

在javascript中设置样式时会起作用

工作示例：

var innerDiv=document.getElementsByClassName（'inner-div'）[0]；
函数growInnerDiv（）{
innerDiv.style.setProperty（'width'，'calc（100%+224px）'）；
}
innerDiv.addEventListener（'click'，growInnerDiv，false）
.outer div{
显示：内联块；
宽度：200px；
高度：100px；
填充：12px；
边框：1px实心rgb（255,0,0）；
背景色：rgb（255255,0）；
}
.内分区{
宽度：100px；
高度：100px；
颜色：rgb（255、255、255）；
字体大小：粗体；
文本对齐：居中；
线高：100px；
字体系列：arial、helvetica、无衬线字体；
背景色：rgb（255,0,0）；
光标：指针；
过渡：所有0.5s线性；
}

点击我
当您将
calc
与相同类型的单位一起使用时，会发生一些有趣的事情，例如
10px+5px
。通过将其放入元素的过程，它被简化为
15px

因此，为了进一步说明这个问题的答案，这里有一些行为实例：


函数growDiv（e）{
常数thisDiv=e.target；
常数x=100；
常数y=42；
常数z=69；
让我们一起来；
if（thisDiv.id==“简化”）{
widthVal=`calc（${y+z}px+${x}px+${y}px）`；
}else if（thisDiv.id==“混合单位”）{
widthVal=`calc（0em+${y+z}px+${x*2}px+${y}px）`；
}else if（thisDiv.id==“变量”）{
thisDiv.style.setProperty（“--x”，x+“px”）；
thisDiv.style.setProperty（“--y”，y+“px”）；
thisDiv.style.setProperty（“--z”，z+“px”）；
widthVal=“计算（（var（--x）*2）+var（--y）+（var（--z）*2））；
}
thisDiv.style.width=widthVal；
thisDiv.innerHTML=
`输入：${widthVal}
样式：${thisDiv.style.width}`；
}
文件
.querySelectorAll（“div”）
.forEach（（el）=>el.addEventListener（“单击”，growDiv，false））
。内部div{
背景色：热粉红色；
颜色：白色；
字体大小：粗体；
高度：100px；
边缘底部：5px；
文本对齐：居中；
过渡：所有0.5s线性；
宽度：100px；
}
简化
1）单击我
混合单元
2）单击我
变量
3）单击我
如果您在发布之前尝试一下该怎么办？我当然尝试过，但似乎不起作用。它不起作用是因为我做了一些语法错误的事情，还是因为它本质上不起作用。@JakeWilson-你几年前的编辑掩盖了造成OP问题的打字错误。这篇帖子原来显示了一个错误；在CSS字符串的末尾（在引号内），将属性留空失败。我犯了同样的错误，发现了这个。但现在还不清楚OP的代码为什么会失败。很高兴知道calc可以从Javascript中工作，因此我会坚持在我的页面上努力工作，而不是放弃并尝试其他方法。非常感谢你的回答，尽管这个问题得了七分。不客气，@NickC。我认为你的问题是完全公平的——当一个过程不起作用时，隔离该过程中不起作用的部分是至关重要的，而不是做出假设——因此我对你的问题投了赞成票。我觉得它真的想要空间，calc（1em+10%）而不是calc（1em+10%）@FlorianB，在编写
calc（）时
在CSS中，必须用空格包围运算符。