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

Question

I want to find the px value of height of html h1 element.

 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 is 56px

When I wrote 56px at h1 tag on CSS, then I can find the height 56px . However If i wrote 3.5rem , it doesn't calculate as 56px .

I did test it with .scrollTop function.

Why do I not get the 3.5rem to 56px value, when I used height() ? How can I convert the rem value to px ?

Answer 1

Think of h1 as a container element like div , Note: these two elements has there own default styles, these default styles may sometimes differ in different browsers. What matters in this case is what is inside the h1 html Element and the styles specified.. After understanding your question. You can achieve what you want by doing the following. If you want something different, let me know.

 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>