How do I set the height of a div using math in JS?

Question

I want to be able to type in the aspect ratio for the div and not have to manually calculate and input the height in the CSS each time.

It's not a big deal, but it would be more elegant this way and I want to learn what the mistake was for future reference.

window.onload = function() {
 var x = document.getElementById("movie");
 var ar = 1.33;
    x.style.height = x.style.height / ar;
};

body {
  background: black;
  margin: 0 auto;
  max-width: 200px;
  height: auto;
}

#movie {
  width: 200px;
  height: 100px;
  background: navy;
}

.t {
  -webkit-animation: change 48s infinite;
  -moz-animation: change 48s infinite;
  -o-animation: change 48s infinite;
  animation: change 48s infinite;
}

.name {
 font-family: 'Alegreya Sans', Helvetica, sans-serif;
 font-size: 13px;
 color: gold;
 text-align: center;
 letter-spacing: 3px;
 margin-top: 36px;
 opacity: 0.3;
}

@keyframes change {
  from {
    background-color: black;
  }
  to {
    background-color: white;
  }
}

<body>
  <div id="movie" class="t"></div>
  <p class="name">Pedro Costa</p>
</body>

I fixed it, no error anymore. But it still doesn't work. @GeekSilva no, it's the id name, fixed it now. — samuset, Jun 27 '17 at 19:10
Likely because `x.style.height` is returning a string like "100px", which doesn't do much when divided by 1.33. Review some articles about getting the current values for things like height like this one: https://stackoverflow.com/q/15615552/215552. — Heretic Monkey, Jun 27 '17 at 19:11

score 2 · Answer 1 · answered Jun 27 '17 at 18:41

2

CSS actually has a calc method that you can use.

width: calc(100% - 100px);

Ex: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_func_calc

answered Jun 27 '17 at 18:41

dotKn0ck

196
1
1
12

You should specify if this is CSS3, and if it's not available in Internet Explorer especially. – krillgar Jun 27 '17 at 18:42
@krillgar It's supported perfectly well in IE. – Jun 27 '17 at 19:22
When I use `height: calc(700px / 1.33)`, it makes height be about 395 pixels, whereas 700/1.33 is 526. – samuset Jun 27 '17 at 19:42
@torazaburo That's good. However, this is still a mostly link-only answer. Nothing is explained about how it works here. – krillgar Jun 28 '17 at 10:52

Nate Whittaker · Accepted Answer · 2017-06-27T19:30:47.913

x.style.height is an empty string because it's looking at the #movie element's style attribute (which is initially empty). The error likely stems from attempting to divide a string by a number.

To figure out what styles are applied via a style sheet or <style> block, you could look at document.getComputedStyle(). However, where you're interested in the height of the element, you might find it preferable to look at the element's offsetHeight property instead. Once you've computed the new height, you'll also need to make sure you append the correct units (e.g. px) before adding it as a style to the element.

x.style.height = x.offsetHeight / ar + 'px';

window.onload = function() {
 var x = document.getElementById('movie');
 var ar = 1.33;
    x.style.height = x.offsetHeight / ar + 'px';
};

body {
  background: black;
  margin: 0 auto;
  max-width: 200px;
  height: auto;
}

#movie {
  width: 200px;
  height: 100px;
  background: navy;
}

.t {
  -webkit-animation: change 48s infinite;
  -moz-animation: change 48s infinite;
  -o-animation: change 48s infinite;
  animation: change 48s infinite;
}

.name {
 font-family: 'Alegreya Sans', Helvetica, sans-serif;
 font-size: 13px;
 color: gold;
 text-align: center;
 letter-spacing: 3px;
 margin-top: 36px;
 opacity: 0.3;
}

@keyframes change {
  from {
    background-color: black;
  }
  to {
    background-color: white;
  }
}

<body>
  <div id="movie" class="t"></div>
  <p class="name">Pedro Costa</p>
</body>

Alternatively, you could seed the #movie element's height as an inline style, but this is generally considered poorer practice.

x.style.height = parseInt(x.style.height) / ar + 'px';

window.onload = function() {
 var x = document.getElementById('movie');
 var ar = 1.33;
    x.style.height = parseInt(x.style.height) / ar + 'px';
};

body {
  background: black;
  margin: 0 auto;
  max-width: 200px;
  height: auto;
}

#movie {
  width: 200px;
  background: navy;
}

.t {
  -webkit-animation: change 48s infinite;
  -moz-animation: change 48s infinite;
  -o-animation: change 48s infinite;
  animation: change 48s infinite;
}

.name {
 font-family: 'Alegreya Sans', Helvetica, sans-serif;
 font-size: 13px;
 color: gold;
 text-align: center;
 letter-spacing: 3px;
 margin-top: 36px;
 opacity: 0.3;
}

@keyframes change {
  from {
    background-color: black;
  }
  to {
    background-color: white;
  }
}

<body>
  <div id="movie" class="t" style="height: 100px;"></div>
  <p class="name">Pedro Costa</p>
</body>

How do I set the height of a div using math in JS?

2 Answers2