Javascript 可以在CSS中进行数学运算吗？

我有jquery accorion id

#accordion

和header class name

中的一些内容。simpleColor

。现在我想给.simpleColor一个计算的边距。在伪…它看起来像这样

.simpleClass {
    margin-left: ((#accordion.width/2) - (.simpleColor.width/2));
}

如果可能的话，我愿意使用javascript等任何其他技术来实现这一点

jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width() / 2) - (jQuery('.simpleColor').width() / 2) + 'px');

---

你应该做你想做的事。但是你需要在javascript中执行类似的操作，除非事先知道#accordian和.simpleColor的宽度（并因此提前计算），否则你无法在纯CSS中执行此操作。

在CSS中本机执行数学运算是不可能的。您可以使用JavaScript在页面加载时更改CSS属性，但这是一个痛苦的过程，必须在每次页面加载时进行，以降低页面速度

您需要使用CSS预处理器，如，或

---

使用这两种语言的好处是，您可以从它们生成实际的CSS样式表。您还可以获得函数、混合、变量等好处。

我认为CSS应该是纯粹的样式定义。我不喜欢把一些计算混为一谈。我会在javascript中这样做

var accWidth=parseInt($("#accordion").css("width").replace("px",""));
var simpWidth=parseInt($(".simpleColor").css("width").replace("px",""));
var marginLeft=((accWidth/2)-(simpWidth/2));       
$(".simpleClass").css("margin-left",marginLeft);

---

工作示例

有一个名为CSS的函数，它开始获得很好的支持。语法的工作原理如下：

width: calc(50% - 100px);

（请注意，运算符周围的空格很重要）

这允许CSS中真正的动态计算支持。使用预处理器，只能将静态长度与静态长度以及相对长度与相对长度组合

---

此时，calc已经获得了广泛的支持，应该可以安全使用，除非您对支持传统浏览器有特殊需求。

您可以使用CSS进行数学运算，例如：

高度：计算（100%-20%）

CSS还将处理不同的单元，因此这也适用于：

高度：计算（100%-20px）

此外，还添加了和，允许进行如下计算：

高度：最小（计算（100%-20px），50%）

min（）：获取最小值
max（）：获取最大值；及
钳制（）：通过提供上限和下限来限制值
看起来你想水平居中。您是否尝试过
边距：0自动？你听说过Nope never吗？听起来似乎很有用css技巧文章：没错，我得到了我需要的东西，但我想接受Michael首先指出的答案：）谢谢你阅读了parseInt（$（“#accordion”）.css（“width”）.replace（“px”（“px”），”））你只需使用$（“#accordion”）.width（）就可以得到整数值。在Chrome上运行得非常好，正如您在Win7和Win8上提到的那样，Firefox和IE。谢谢获得填充和100%宽度的div是一件非常痛苦的事情，而将javascript用于如此简单的事情似乎是一种浪费。这好多了！你可能还想调查一下。这使得padding从宽度中减去而不是加上，并且它比calc具有更好的支持，回到IE8，并且具有if支持。IE8仍然占有相当大的市场份额，因此我建议根据您的需要使用
盒子大小。非常感谢！这就是我一直在寻找的。