Question

我正在做我有时会做的那些随机测试，并且想出了创建以下页面的想法：

我有3个div，所有div的背景色都为green，高度为50px
我有3个div，所有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的高度，我会很高兴。

Answer 1

如果我理解正确，边框会使高度102px而不是100px，这可能是问题所在。这可以通过少量使用CSS来解决：

.divgreen, .divred {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

详细了解mdn。

上的box-sizing property

document.querySelectorAll和div.style一起工作

1 个答案: