将 div 高度设置为等宽 ( javascript )

我知道这是一个很受欢迎的问题。我已经阅读了解决方案，包括将 padding-bottom 设置为相等宽度。以及将其分配给伪元素，以便更容易插入内容。 （加上其他 CSS 解决方案）。css 高度与宽度相同 https://stackoverflow.com/questions/21537806/css-height-same-as-width

这些确实有效，但它给我插入的一些内容带来了麻烦，而且不值得这么麻烦（因为我的整个网站都是从这些方块构建的）。

我是 javascript 的新手，但是是否有一个简单的解决方案可以使 div 高度等于宽度。 （抱歉，我太新手了，甚至无法尝试：/）

我尽量不要问太多“为我编写代码”的问题，因此参考或解释将同样受到赞赏。

Answer: 谢谢雅各布只是为了添加到您的代码中，现在可以调整大小，以防其他人遇到同样的问题https://jsfiddle.net/pekqh5z1/4/ https://jsfiddle.net/pekqh5z1/4/

function updateSize(){
var box = $(".test");
box.css("height", box.width());
}

$( window ).resize(updateSize);
$(document).ready(function(){
updateSize();
})

这非常容易做到。

要使用 JS 编辑设置元素的样式，您可以设置所需的属性style method.

var test = document.querySelector(".test");
test.style.height = getComputedStyle(test).width;

.test {
  background: red;
}

<div class="test">Super uber goober</div>

有了JS，我们首先选择第一个出现的.test，并将其分配给变量（var test = document.querySelector(".test");)

然后我们得到元素的计算宽度，并将其设置为其高度（test.style.height = getComputedStyle(test).width;)

为了完整起见，这里还有一个 jQuery 解决方案：

var test = $(".test");
test.css("height", test.width());

.test {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="test">Super uber goober</div>