如何使用纯JS将宽度与高度相等为CSS规则

Question

如何使用纯JS使宽度与高度相等成为CSS规则？也许，在CSS中有一个解决方案。

CSS

#animation-2 > div.line {
  height: 10%;
  background: red;
}

JS

let line = document.querySelector('.line');
let height = line.offsetHeight;
document.querySelector('.line').style.width = height;

它不起作用。我要以像素为单位的价值。我能忘了加点什么吗？

谢谢

Answer 1

你忘了"px“后缀：

let line = document.querySelector('.line');
let height = line.offsetHeight;
document.querySelector('.line').style.width = height + 'px';

https://jsfiddle.net/yr5eu2gn/

Answer 2

存储在line.offsetHeight中的值是一个number计数像素，而elem.style.width需要一个带有单位的字符串。

因此，你必须写

document.querySelector('.line').style.width = height + 'px';

Answer 3

offsetHeight没有按百分比计算大小。它以像素为单位。所以，你需要得到父母的高度以及计算大小的百分比。

此外，您还需要添加您想要使用的单元以及Javascript只保存数字。

编辑:嗯..。只是看到你的编辑，你想要它的像素而不是百分比。希望这能帮上忙。

​

let line = document.querySelector('.line');
let height = line.offsetHeight;
let parentHeight = line.offsetParent.offsetHeight;
let percentHeight = Math.round(100 * height / parentHeight);
line.style.width = percentHeight+"%";
line.innerHTML = percentHeight;

#animation-2{
height: 100vh;
}

#animation-2 > div.line {
  height: 10%;
  background: red;
}

<div id="animation-2">
<div class="line"></div>
</div>

​