Javascript 是否可以在 CSS 中进行数学运算？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10378292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to do mathematics inside CSS?
提问by TeaCupApp
I have jquery accorion id #accordionand some of the content inside header class name .simpleColor. Now I want to give a calculated margin to .simpleColor. In pseudo...it looks something like this,
我有 jquery 手风琴 id#accordion和标题类名称中的一些内容.simpleColor。现在我想给 .simpleColor 一个计算的边距。在伪......它看起来像这样，
.simpleClass {
margin-left: ((#accordion.width/2) - (.simpleColor.width/2));
}
I am open to use any other technology such as javascript to achieve this if it is possible.
如果可能的话，我愿意使用任何其他技术（例如 javascript）来实现这一目标。
回答by TimE
There's a CSS function called calcthat is starting to get pretty good support. The syntax works as followed:
有一个名为calc的 CSS 函数开始得到很好的支持。语法如下：
width: calc(50% - 100px);
(Note that the whitespace around the operators is significant)
（请注意，运算符周围的空格很重要）
This allows true dynamic computational support in CSS. With a preprocessor, you can only combine static lengths with static lengths, and relative lengths with relative ones.
这允许在 CSS 中实现真正的动态计算支持。使用预处理器，您只能将静态长度与静态长度以及相对长度与相对长度组合在一起。
Calc is supported since Chrome 19, Firefox 4, and IE9. The feature isn't quite widely supported enough to use it widely, but it will be not too far into the future and it's something to remember and look forward to.
自 Chrome 19、Firefox 4 和 IE9 起支持 Calc。该功能没有得到足够广泛的支持以广泛使用它，但它不会在未来太远并且值得记住和期待。
回答by Stanley Stuart
It is not possible to do mathematic operations inside CSS natively. You could use JavaScript to change CSS properties on page load, but this is a pain and must be done every page load making your page slow.
在 CSS 中原生地进行数学运算是不可能的。您可以使用 JavaScript 在页面加载时更改 CSS 属性，但这很痛苦，并且必须在每次页面加载时完成，从而使您的页面变慢。
You'll need to use a CSS preprocessor like LESS, Stylus, or SASS.
您需要使用 CSS 预处理器，例如LESS、Stylus或SASS。
The bonus to using either of these languages is that you can generate actual CSS stylesheets from them. You also get benefits like functions, mixins, variable, and more.
使用这两种语言中的任何一种的好处是您可以从它们生成实际的 CSS 样式表。您还可以获得函数、mixin、变量等好处。
回答by Jared Kipe
jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width() / 2) - (jQuery('.simpleColor').width() / 2) + 'px');
Should do what you are wanting. But you need to do something like this in javascript, you can't do it in pure CSS unless the widths for #accordian and .simpleColor are known in advance (and thus calculated in advance).
应该做你想做的。但是你需要在 javascript 中做这样的事情，你不能在纯 CSS 中做，除非 #accordian 和 .simpleColor 的宽度提前知道（因此提前计算）。
回答by Sanu Uthaiah Bollera
See this Example.. He has used much math in css.
看到这个例子.. 他在 css 中使用了很多数学。
回答by Shyju
I believe the CSS should be pure style definition. I dont like to mix some calculations with that. I would do that in my javascript
我相信 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);
Working sample http://jsfiddle.net/mzTRw/19/
回答by Michael Silveira
If you're open to using other technology, try using less: http://lesscss.org/
如果您愿意使用其他技术，请尝试使用 less：http: //lesscss.org/
