document.querySelectorAll 与 div.style 一起不起作用答案

【问题标题】：document.querySelectorAll together with div.style does not workdocument.querySelectorAll 与 div.style 一起不起作用
【发布时间】：2017-05-31 13:20:18
【问题描述】：

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

我有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 的高度，我会很高兴。

【问题讨论】：

你的 sn-p 似乎工作得很好。
正如@Alohci 上面所说-it works
@Alohci 真的吗？我正在使用 Firefox 51.0.1，但我似乎没有什么可以正常工作...
@natanel97 我正在尝试将绿色 div 的高度提高到红色 div 的高度......似乎不起作用......
for(var i=0; i

标签： javascript html css dom styles

【解决方案1】：

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

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

在 mdn 上了解有关 box-sizing property 的更多信息。

【讨论】：

感谢您解决问题！