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