我又在做那些我有时会做的随机测试，只是想出了创建以下页面的想法:
- 我有
3个 div，它们的背景颜色都是green，高度都是50px - 我有
3个 div，它们的背景颜色都是red，高度都是100px - 所有这些 div 就像正方形一样
到目前为止，这是我的代码:
<html>
<head>
<title>Test StackOverflow</title>
</head>
<body>
<div class="divgreen" style="height: 50px; width: 50px; background-color: green; border: 1px solid black; border-radius: 2px;"></div>
<div class="divgreen" style="height: 50px; width: 50px; background-color: green; border: 1px solid black; border-radius: 2px;"></div>
<div class="divgreen" style="height: 50px; width: 50px; background-color: green; border: 1px solid black; border-radius: 2px;"></div>
<div class="divred" style="height: 100px; width: 100px; background-color: red; border: 1px solid black; border-radius: 2px;"></div>
<div class="divred" style="height: 100px; width: 100px; background-color: red; border: 1px solid black; border-radius: 2px;"></div>
<div class="divred" style="height: 100px; width: 100px; background-color: red; border: 1px solid black; border-radius: 2px;"></div>
</body>
</html>现在我想将所有绿色 div 的高度(在运行时，或者更具体地说，在页面加载时)设置为所有红色 div 的高度。为此，我选择使用 JavaScript。在互联网上进行研究后，我设法创建了以下脚本:
function change() {
var greens = document.querySelectorAll('.divgreen');
var reds = document.querySelectorAll('.divred');
for(var i=0; i<reds.length; i++) {
greens[i].style.height = reds[i].style.height;
}
}<html>
<head>
<title>Test StackOverflow</title>
</head>
<body onload="change();">
<div class="divgreen" style="height: 50px; width: 50px; background-color: green; border: 1px solid black; border-radius: 2px;"></div>
<div class="divgreen" style="height: 50px; width: 50px; background-color: green; border: 1px solid black; border-radius: 2px;"></div>
<div class="divgreen" style="height: 50px; width: 50px; background-color: green; border: 1px solid black; border-radius: 2px;"></div>
<div class="divred" style="height: 100px; width: 100px; background-color: red; border: 1px solid black; border-radius: 2px;"></div>
<div class="divred" style="height: 100px; width: 100px; background-color: red; border: 1px solid black; border-radius: 2px;"></div>
<div class="divred" style="height: 100px; width: 100px; background-color: red; border: 1px solid black; border-radius: 2px;"></div>
</body>
</html>但该代码似乎不起作用。我做错了什么？
我已经在控制台中记录了所有内容，但没有结果。我想在 JavaScript 中使用它，但如果您想使用 jQuery，那么当然可以。
如果您确实使用 jQuery，请向我解释代码，因为我无法理解 jQuery 的简短方法与 javascript 一样好。
顺便说一下，如果您在回答中还向我展示如何将绿色 div 的宽度设置为红色 div 的高度，我会很高兴。
最佳答案
如果我没理解错的话，边框使高度为 102px 而不是 100px，这可能就是问题所在。这可以通过使用一点 CSS 来解决:
.divgreen, .divred {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
了解更多关于 box-sizing property 的信息在 mdn 上。
关于javascript - document.querySelectorAll 与 div.style 一起不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44285978/