如何将 CSS rem 值转换或读取为 px？答案

【问题标题】：How to convert or read CSS rem value to px?如何将 CSS rem 值转换或读取为 px？
【发布时间】：2019-12-13 19:05:33
【问题描述】：

我想找到html h1元素的高度的px值。

var height = $("h1").height();
console.log(height);

$(window).on("scroll", function() {
  if ($(window).scrollTop() >= height) {
    // ...
  } else {
    // ...
  }
});

h1 {
  font-size: 3.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Foo</h1>

3.5rem 是56px

当我在 CSS 上的 h1 标签上写 56px 时，我可以找到高度 56px。但是，如果我写了3.5rem，它不会计算为56px。

我确实使用.scrollTop 函数对其进行了测试。

当我使用height() 时，为什么我没有得到3.5rem 到56px 的值？如何将rem 值转换为px？

【问题讨论】：

font-szie 必须是 font-size，但我认为这只是问题中的一个错字。
函数 convertRemToPixels(rem) { return rem * parseFloat(getComputedStyle(document.documentElement).fontSize); }
还要注意 jQuery 从 DOM 读取值，因此它总是返回 px，尽管 CSS 值中使用了单位。您可以从我编辑到您的问题的 sn-p 中看到这一点。鉴于 sn-p 编辑器的默认样式，3.5rem 大约是 65 像素，并在 Chrome、Firefox 和 IE11（可能还有所有其他浏览器，但我没有测试这些浏览器）中返回。所以换句话说，我看不出你的代码有任何问题，它应该可以正常工作。

标签： jquery css height

【解决方案1】：

将h1 视为像div 一样的容器元素，注意： 这两个元素都有自己的默认样式，这些默认样式有时在不同的浏览器中可能会有所不同。在这种情况下，重要的是 h1 html 元素中的内容和指定的样式。在理解您的问题之后。您可以通过执行以下操作来实现您想要的。如果您想要不同的东西，请告诉我。

var h1 = $('h1').css('font-size');
console.log(h1);

$(window).on("scroll", function() {
  if ($(window).scrollTop() >= height) {
    // ...
  } else {
    // ...
  }
});

h1 {
  font-size: 3.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Foo</h1>

【讨论】：