JS中如何正确的使用有变量的calc()？

在说JS中的calc()方法前，我们先说说使用calc()的一定要注意（无论在js中还是css中）。

　　①使用calc()动态运算时,要注意加减运算时，符号前后要加空格。乘除运算则不需要。例如：

　　　　　　　width:calc(100% - 200px);
　　　　　　　width:calc(50%*200px);

　　在写js中，我们可能会碰到需要某个板块或者某样东西居中，但是如果我们直接使用

margin-left：50%；

或者

left:50%;

的话，我们一般会得到这个板块离中间偏左或者偏右。



我们通过这张图片可以看到，黑色这块板块他的左边是居中的，但是整体来讲他是偏右的，不符合我们的期望，这是为什么呢？

　　因为我们用的margin-left或者left都是以这个板块或者这个东西的左边界作为参考标准，居中的也是使左边界居中，而没有考虑到这个板块的长度。

　　

　　所以我们在js中，如果我们有动态获取某个板块的宽度并使这个板块居中的需求的话，

　　　let div = document.getElementsByClassName("div")[0];
　　　//获取div标签

//如果没有变量的话，我们可以直接，
div.style.left="calc(50% - 50px)";

//因为我们需要动态获取长度，所以会有变量，如果我们这样
div.style.left="calc(50% - div2.clientWidth/2)";
//这样是显然不行的，因为这样的话会把div2.clientWidth当成字符串解析！

//所以我们可以用拼凑的方法
　　　div.style.marginLeft = "calc(50% -"+div.clientWidth/2+"px)";
//这里需要注意，用加减号的话需要前后留空格，并且这里的宽度之所以要除以2是因为我们要的中间是板块的中间（也就是这个宽度的一半）

　这样子就可以正确的使用calc()了！