I use this code in JS:

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

The result is in pixel in html source,

But:

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

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

I use this code in JS:

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

The result is in pixel in html source,

But:

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

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

• javascript
• html
• css
• measurement

• Do you mean rem or em ? – user2705585 Commented Apr 10, 2016 at 16:25
• 1 The inspector will always show pixel width - that doesn't mean that you haven't specified rem. Apparently, your base font size is 10px so that 20rem = 200px – Adam Jenkins Commented Apr 10, 2016 at 16:28
• 2 rem: relative em. rem is depend on device and it is suggested to use if the website is for any different devices with different density. for the project that I should write, I am supposed to use DOM so I used JS to set the width but rem in js doesn't work . We couldn't tell that 20rem = 200px in all devices. – Malus Jan Commented Apr 10, 2016 at 16:55

2 Answers 2

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...)

The HTML width attribute only takes an integer number of pixels or a percentage (followed by a % sign).

If you wish to use CSS length units you have to use CSS (and set bigPhoto.style.width = "200rem".