javascript - 在 JavaScript 中计算两个长度的最小值

Question

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

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

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

Answer 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%')返回最小值。