让 jQuery 用 em 而不是 px 来测量答案

【问题标题】：Get jQuery to measure with em instead of px让 jQuery 用 em 而不是 px 来测量
【发布时间】：2014-03-19 00:22:15
【问题描述】：

我不确定我能说得好不好，但让我试一试。

我有一个大量基于 jQuery 的网站；这意味着它的大部分内容都是由 jQuery 创建、测量和设置的。

所有这些测量值都是 px。我需要将它们转换为 em，或者最好创建一个函数来为我转换它们。如果所有字体大小都是 16 像素（或 100%），这将很容易；然而，情况并非如此。我需要它来检测容器的字体大小并从那里开始。

如果措辞不当，我深表歉意。如果你能理解这一点并帮助我，那就太好了。如果你觉得不可能，请不要回复，一切皆有可能，只看你愿意付出多少努力。

【问题讨论】：

我们确实需要看一些代码来回答。我认为让 css 类完成工作，而 jQuery 将类添加到 HTML，但是，没有看到代码我不知道这是否是继续的方式。
要显示的代码太多了； &不，那是行不通的。我正在动态创建元素和样式，并且正在检测诸如某物的宽度之类的测量值并将其设置为 var 并设置另一个元素的位置，例如 = that var。我希望这可以帮助澄清？
有什么理由你必须动态创建类，而你不能将它们放在一个 css 文件中，而只是在 jQuery 中更改 dom 元素的类？
是的。这是一个内容丰富的大型互动网站，内容会不断变化。

标签： jquery units-of-measurement measurement em

【解决方案1】：

我想通了。可以看代码here。

          function px_to_em(px_value, container) {
          ////////////////////////////////
          // Detect Contianer Font Size //
          ////////////////////////////////

          //Prepend a span tag to the container for testing
          $(container).prepend("<span id='wraping_span_to_test'></span>");

          //Set the span to height 1em and then save the pixel height to the container_ft_sz variable
          container_ft_size = $("#wraping_span_to_test").css({
              "font-family": "inherit",
                  "font-size": "inherit",
                  "font-style": "inherit",
                  "font-variant": "inherit",
                  "font-weight": "inherit",
                  "line-height": "inherit",
                  "margin": "0 !important",
                  "padding": "0 !important",
                  "border": "0 !important",
                  "outline": "0 !important",
                  "background-color": "aqua",
                  "height": "1em",
                  "width": " 1em",
                  "display": "block"
          }).height();

          //Remove the testing span
          $("#wraping_span_to_test").remove();

          //Use values to convert to ems
          var round_to = 1000;
          return Math.round((px_value / container_ft_size) * round_to) / round_to;
      }

这应该允许您使用 jQuery 找到按像素测量的测量值，并通过调用一个简单的函数将它们转换为 em 测量值。

【讨论】：

【解决方案2】：

这并不容易。考虑一下，您可以暂时插入 width:1em 的内容，以 px 为单位测量宽度，然后从那里计算您需要的 em。

【讨论】：

我看不到这个解决方案如何获得我需要的结果，因为 ems 是基于字体大小的。能否详细说明或举个例子？