将 css calc 函数转换为以 px 为单位的值答案

【问题标题】：Convert css calc function to value in px将 css calc 函数转换为以 px 为单位的值
【发布时间】：2015-09-23 23:05:11
【问题描述】：

我正在尝试将某个元素的最小高度设置为另一个元素的最小宽度。某些元素的最小宽度是使用 less 中的一些 calc 公式给出的，并且该公式稍后可能会更改。我尝试使用 JQuery 将最小高度设置为最小宽度，但它只是插入了没有给出相同输出的计算方程，因为 20% 的宽度不是高度的 20%。我正在查看css width: calc(100% -100px); alternative using jquery，但该方程的解决方案需要知道 jquery 中的公式是什么，我想编写我的代码，以便无论你在 less 中更改多少计算公式，它都能正常工作。

示例：http://jsfiddle.net/n6DAu/2116/

$(element).width() returns the width in pixels
$(element).css('min-width') returns the equation

【问题讨论】：

注意，-旁边必须有空格，否则不起作用，所以语法应该是width: calc(100% - 100px);
在我完全理解您的问题之前，我提前向您道歉。但是，我发现这可能会有所帮助：stackoverflow.com/questions/5445491/… .
@Jon 感谢您的回复，但我尝试了该答案，但它仍然不适用于计算方程。使用 JQuery css 函数，它返回整个 calc 函数，并在其上附加 'px' 是行不通的：jsfiddle.net/n6DAu/2109
@JonEdwards，我以前的 jsfiddle 很糟糕，该代码在使用 .width() 时有效。但是，当使用 .css('min-width') 时，它并没有给出 px 计算方程 jsfiddle.net/n6DAu/2116
我想我不明白，但你知道 width 和 min-width 不是一回事，不管你是怎么得出这个值的？

标签： javascript jquery css less calc

【解决方案1】：

对我来说似乎是特定于浏览器的。 Chrome 将 min-width 报告为计算，在开发者工具 DOM 检查器中，它也报告为计算。

另一方面，Firebug 在 javascript 和 DOM 检查器中（使用您的小提琴）将其报告为像素值。 Firefox 的内置 dom 检查器也将其报告为像素大小，而不是计算。

我没有费心在 IE 中进行测试。

所以我的回答是——可能——你做不到。（或者至少你不能以通用、可靠的跨浏览器方式做到这一点） min-width 的值无论如何都会根据封闭元素而改变，所以它可能是你只需要计算的东西苍蝇，因为您可以在任何给定时间点找出封闭元素的宽度。

【讨论】：