Setting width and height as a percentage in JavaScript

Question

Here is my JavaScript code:

a.width = a.width ? a.width : 640;
a.height = a.height ? a.height : 360;

How can I make the 640px and 360px percentages instead? I want them both to be 70% of the windows size.

Try using: http://stackoverflow.com/questions/3437786/how-to-get-web-page-size-browser-window-size-screen-size-in-a-cross-browser-wa to get the current size, and multiply that by whatever percentage you want. — Gal, Aug 18 '13 at 15:04
This may be out of date, but I had success using '70vh' instead of '70%' — SeanVDH, Sep 18 '14 at 00:09

score 1 · Answer 1 · answered Aug 18 '13 at 15:17

If the container of the element have sizing specified already, then you can simply use percentages in CSS. For instance:

.#my-el {
    width: 70%;
    height: 70%;
}

<div id="my-el"></div>

However, if you have to use JavaScript for some reason, you could do something like:

el.style.width = Math.round(document.documentElement.clientWidth * .70) + 'px';

You may have to use a more complex approach to determine the viewport size for cross-browser support however, but this question was already answered.

score 1 · Answer 2 · answered Aug 18 '13 at 15:19

percentage is a relative value.

you need to have relative value like screenWidth (for suppose) 1240px so that you will get percentage of that value.

Example

var pixels = 100;
var screenWidth = window.screen.width;
var percentage = ( screenWidth - pixels ) / screenWidth ; // 0.92%

score 0 · Accepted Answer · answered Feb 15 '23 at 09:06

To set an element's width or height as a percentage, there are a couple of options available.

Firstly, you can set the element's dimensions as a percentage of its container like this:

element.width = "70%";
element.height = "70%";

Alternatively, you can set the dimensions as a percentage of the screen size instead like this:

element.width = "70vw";
element.height = "70vh";

These values stand for "viewport height" and "viewport width".

However, since both of these options use basic CSS values, it may be preferable to add a CSS class dynamically to the element instead of setting its style properties directly in JavaScript. For example:

element.classList.add("my-class");

Then, define the .my-class selector in a stylesheet like this:

.my-class {
  width: 70%;
  height: 70%;
}

Setting width and height as a percentage in JavaScript

3 Answers3

Linked