rem px in Javascript

javascript html css measurement
Malus Jan picture Malus Jan · Apr 10, 2016 · Viewed 29.7k times · Source

I use this code in JS:

bigPhoto.setAttribute("width", "200rem");

The result is in pixel in html source,

enter image description here

But:

enter image description here

When I change it to 20rem the photo become really small.

I couldn't solve the problem which is mentioned in the photos.

Answer

etham picture etham · Mar 13, 2017

Another method would be to convert rem into pixels:

function convertRemToPixels(rem) {    
    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
}

This can be useful when you must perform some arithmetic in js (such as using the position of the mouse to display a tooltip...)

Related questions

Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More
Failed to load resource: the server responded with a status of 404 (Not Found)

I can't solve my link problem. Could you help on to this to link CSS and JS File? CSS: <link href="../Jquery/jquery.multiselect.css" rel="stylesheet"/> <link href="../Jquery/style.css" rel="stylesheet" /> <link …

Read More