document.queryselectorall与Div.Style一起行不通

我有时会再次进行那些随机测试，只是想出创建以下页面的想法：

我有 3divs，全部具有green的背景颜色和50px的高度
我有 3divs，全部具有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>

现在，我想将所有绿色divs的高度(在运行时，或更具体地在页面加载上(设置为所有红色divs的高度。为此，我选择使用JavaScript。在Internet进行了研究后，我设法创建了以下脚本：

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一样好。

顺便说一句，如果您还向我展示您的答案，我会很高兴如何将绿色的宽度设置为红色Divs的高度。

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

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

在MDN上了解有关box-sizing属性的更多信息。

相关内容

最新更新

热门标签：