CODEWITHSUNDEEP
javascripthtmlcss
samuset
samuset

Reputation: 285

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

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>

Upvotes: 1

Views: 1864

Answers (2)

Nate Whittaker
Nate Whittaker

Reputation: 1966

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>

Upvotes: 1

ConnerAiken
ConnerAiken

Reputation: 194

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

Upvotes: 2

Related Questions