Question

我希望能够输入div的宽高比，而不必每次都在CSS中手动计算和输入高度。

这不是什么大不了的事，但这种方式会更优雅，我想知道将来参考的错误是什么。

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>

Answer 1

CSS实际上有一个可以使用的计算方法。

@media ( max-width: 500px) {
  .item3 { height: 60vh; }
}
@media ( max-width: 300px) {
  .item3 { height: 50vh; }
}

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

Answer 2

x.style.height是一个空字符串，因为它正在查看#movie元素的style属性（最初为空）。该错误可能源于尝试将字符串除以数字。

要确定通过样式表或<style>块应用了哪些样式，您可以查看document.getComputedStyle()。但是，如果您对元素的高度感兴趣，您可能会发现最好再查看元素的offsetHeight属性。一旦计算出新的高度，您还需要确保在将其作为样式添加到元素之前附加正确的单位（例如px）。

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>

或者，您可以将#movie元素的高度作为内联样式播种，但这通常被认为是较差的练习。

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>

如何在JS中使用数学设置div的高度？

2 个答案: