javascript - JavaScript：将 ex 转换为 px

Question

所以我正在阅读 elem.style.width，并得到类似“3.1415926ex”的内容。

我想将其转换为“px”。

JavaScript 是否有内置函数来执行此操作？我更喜欢砍掉字符串的最后两个字母，将其读取为数字，然后将其乘以一个魔术常数。

谢谢！

Answer 1

没有“神奇常数”，因为没有从ex到的直接转换px（与将英寸转换为厘米不同）。

ex单位是当前字体中小写“x”字符的高度（其中“字体”是字体系列（例如 Times New Roman）、大小（例如 14 像素或 72 pt）和样式（常规、粗体）的组合，斜体））。

...所以 72pt Impact Bold 中的“1ex”大于 8pt Helvetica Regular 中的“1ex”。

如果您知道这些详细信息，则可以从exto转换。px当然，听起来你真的只想要“计算样式”，它总是以像素为单位。阅读本文：如何获得计算样式？

Answer 2

没有为此目的的内置函数。给定一个可以在 JavaScript 中使用变量 访问的元素elem，您可以使用表达式 获得它的宽度（以像素为单位，四舍五入为整数）elem.clientWidth。为了使它不圆整，精度因浏览器而异，原则上您可以elem.getBoundingClientRect().width改用它，尽管它实际上会在许多浏览器中产生一个四舍五入的结果或不准确的结果。– 如果元素的水平填充为零，则适用。

如果你设置一个元素的宽度，1ex然后将上面的内容应用到它，你将得到一个整数或实数，它告诉你ex以像素为单位的值。但这不是一个神奇的常数：它取决于字体系列和字体大小。

注意：一些旧浏览器，例如 IE 7，错误地将单位实现为ex单位的一半em，而不是正确使用字体的 x-height。