document.querySelectorAll與div.style一起不起作用

我又做這些抽查我有時會做，只是想出創造下頁的想法：document.querySelectorAll與div.style一起不起作用

我有3的div，所有的背景顏色和50px
我有3的div，所有的red背景顏色和100px
所有這些div's高度的高度表現得好像他們是正方形

這裏是我到目前爲止的代碼：

<html> 
 
\t <head> 
 
\t \t <title>Test StackOverflow</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="divgreen" style="height: 50px; width: 50px; background-color: green; border: 1px solid black; border-radius: 2px;"></div> 
 
\t \t <div class="divgreen" style="height: 50px; width: 50px; background-color: green; border: 1px solid black; border-radius: 2px;"></div> 
 
\t \t <div class="divgreen" style="height: 50px; width: 50px; background-color: green; border: 1px solid black; border-radius: 2px;"></div> 
 
\t \t <div class="divred" style="height: 100px; width: 100px; background-color: red; border: 1px solid black; border-radius: 2px;"></div> 
 
\t \t <div class="divred" style="height: 100px; width: 100px; background-color: red; border: 1px solid black; border-radius: 2px;"></div> 
 
\t \t <div class="divred" style="height: 100px; width: 100px; background-color: red; border: 1px solid black; border-radius: 2px;"></div> 
 
\t </body> 
 
</html>

現在我想將所有綠色的div的高度（同時運行時，或者，更具體，頁加載）到所有紅色div的高度。爲此，我選擇使用JavaScript。在互聯網研究後，我設法創建以下腳本：

function change() { 
 
    var greens = document.querySelectorAll('.divgreen'); 
 
\t var reds = document.querySelectorAll('.divred'); 
 
\t for(var i=0; i<reds.length; i++) { 
 
\t greens[i].style.height = reds[i].style.height; 
 
    } 
 
}

<html> 
 
\t <head> 
 
\t \t <title>Test StackOverflow</title> 
 
\t </head> 
 
\t <body onload="change();"> 
 
\t \t <div class="divgreen" style="height: 50px; width: 50px; background-color: green; border: 1px solid black; border-radius: 2px;"></div> 
 
\t \t <div class="divgreen" style="height: 50px; width: 50px; background-color: green; border: 1px solid black; border-radius: 2px;"></div> 
 
\t \t <div class="divgreen" style="height: 50px; width: 50px; background-color: green; border: 1px solid black; border-radius: 2px;"></div> 
 
\t \t <div class="divred" style="height: 100px; width: 100px; background-color: red; border: 1px solid black; border-radius: 2px;"></div> 
 
\t \t <div class="divred" style="height: 100px; width: 100px; background-color: red; border: 1px solid black; border-radius: 2px;"></div> 
 
\t \t <div class="divred" style="height: 100px; width: 100px; background-color: red; border: 1px solid black; border-radius: 2px;"></div> 
 
\t </body> 
 
</html>

但是，代碼似乎沒有工作。我做錯了什麼？

我已經記錄了控制檯中的所有內容，沒有任何結果。我想使用JavaScript，但如果你想使用jQuery，那麼當然可以。

如果您使用jQuery，請向我解釋代碼，因爲我無法理解jQuery的簡短方式，與JavaScript相當。

順便說一句，如果你在答案中也顯示我如何將綠色div的寬度設置爲紅色div的高度，那麼我很高興。

來源

2017-05-31 VicStudio

你的代碼似乎很好地工作。 – Alohci

正如@Alohci上面所說 - [它的作品]（http://jsbin.com/jopirorope/edit?html,js,output） – natanelg97

@Alohci真的嗎？我使用的Firefox 51.0.1，似乎沒有任何工作罰款... – VicStudio

如果我理解正確，邊界使高度102px而不是100px，這可能是問題所在。這可以用一點CSS來解決：

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

瞭解更多關於box-sizing property關於mdn。

來源

2017-05-31 13:35:52 natanelg97

謝謝你解決問題！ – VicStudio

@VicStudio不客氣！ :-) – natanelg97

document.querySelectorAll與div.style一起不起作用

回答

相關問題