在 JavaScript 中计算两个长度的最小值答案

【问题标题】：Computing minimum of two lengths in JavaScript在 JavaScript 中计算两个长度的最小值
【发布时间】：2018-11-04 00:15:40
【问题描述】：

我需要在 JavaScript 中为 div 和 margin-left 设置它的值，如果不同单位的两个长度之间的最小值，例如min(10pt,15vw).

我们可以使用Math.min() 来比较数字。有没有类似的长度函数？

或者，有没有办法将长度从一个单位转换为另一个单位？

【问题讨论】：

Min 函数已经存在。您将不得不编写一个转换函数，将这些数字转换为单个单位..
在不实际渲染元素的情况下将像素与百分比进行比较可能会变得复杂。也许您可以以两种方式渲染“阴影”元素，测量它们的实际长度（以像素为单位），并据此做出决定。或者，您可以改用 min-width 重新设计布局。
我建议尝试我在回答中提供的 Live Demo，以收集返回两个值中的最小值的实践经验。

标签： javascript html

【解决方案1】：

可以通过创建一个临时隐藏的div 并使用offsetWidth 属性计算元素的布局宽度（以像素为单位）来计算具有不同单位的两个长度的最小值（然后立即删除div）：

const minimum = (a, b) => {
  const temp = document.createElement('div');
  const size = [];

  temp.style.padding = 0;
  temp.style.border = 0;
  temp.style.overflow = 'hidden';
  temp.style.visibility = 'hidden';

  document.body.appendChild(temp);

  temp.style.width = a;
  size[0] = temp.offsetWidth;
  temp.style.width = b;
  size[1] = temp.offsetWidth;

  temp.parentNode.removeChild(temp);

  return Math.min(size[0], size[1]) - size[0] ? b : a;
};

console.log('The minimum width is:', minimum('100px', '100%'));

如上图，可以使用minimum('100px', '100%')返回最小值。

【讨论】：

【解决方案2】：

由于 1vw 反映了视口宽度的 1%，您可以使用 window.innerWidth 将其转换为像素：

var 1vw = window.innerWidth * 0.01;

并将其与 15 像素进行比较：

Math.min(1vw * 15, 10);

【讨论】：

【解决方案3】：

您可以使用简单的比较运算符进行长度比较，例如 =、= 等。但前提是您的单位相同。你的问题的另一部分，你可以使用一个小的 js 库，称为 math.js。 math.js 库支持单位。该库尚不支持派生单位，但正在计划中。

http://mathjs.org/

【讨论】：

那么if (10pt <= 15vw) {document.getElementById('my-div').style.margin='10pt'} 有效吗？
当 StackOverflow 出现投票时，为什么你 @myfirsttime1 会觉得自己像个罪犯？
不，当然不是。那是针对类似的单位。您必须以相似的单位制作它们，然后进行比较。