Question

我想找到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上的56px标签上写了h1时，我可以找到高度56px。但是，如果我写了3.5rem，它就不会算作56px。

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

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

Answer 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>

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

1 个答案: