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

Question

我知道这是一个很受欢迎的问题。我已经阅读过此问题的解决方案，包括将 padding-bottom 设置为相等宽度。以及将其分配给伪元素，以便更容易插入内容。 (加上其他 CSS 解决方案)。 css height same as width

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

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

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

答案: 感谢 Jacob 只是将其添加到您的代码中，现在可以在调整大小时使用，以防其他人遇到同样的问题 https://jsfiddle.net/pekqh5z1/4/

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

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

Answer 1

这非常容易做到。

要使用 JS 编辑设置元素的样式，请设置 style 方法所需的属性。

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 = getCompulatedStyle(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>