document.querySelectorAll与div.style一起使用不起作用

Question

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

我有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，请向我解释代码，因为我无法像javascript一样很好地理解jQuery的简短方法。

顺便说一句，如果您在回答中也告诉我如何将绿色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属性的更多信息。

document.querySelectorAll与div.style一起使用不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳

document.querySelectorAll与div.style一起使用不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳

解决方案1
1 已采纳