如何將樣式應用於JavaScript中的類？

我在我的身體多個div這就需要相同的風格：如何將樣式應用於JavaScript中的類？

<div class="box"></div>

我有一個計算的瀏覽器窗口視口高度的高度的JavaScript。我想將這個高度應用於我所有的「盒子」分類div。

<script type="text/javascript"> 
var box = document.getElementsByClassName('box')[0]; 
var height = (window.innerHeight) ? window.innerHeight: document.documentElement.clientHeight; 
box.style.height=(height)+'px'; 
</script>

這是有效的，但只有一個div，它不會使第二個「box」div與前一個高度相同。如果我將方括號中的數字從0更改爲1，則會將高度應用於第二個div。另外，如果我製作第二個JavaScript副本，以便第一個腳本具有[0]，第二個腳本將高度應用於兩個div。我無法刪除方括號，因爲那樣JavaScript根本不起作用。我也嘗試用getElementsByTagName獲取名稱，但沒有成功。

我該如何讓這個JavaScript應用相同的高度與「盒」類的所有div？還是有另一種方法來做我想做的事情？

來源

2011-12-31 hlotvonen

0是'getElementsByClassName'返回的數組的第一個元素的索引。 – 2011-12-31 12:42:43

嘗試以下操作：

var elems = document.getElementsByClassName('box'), 
    size = elems.length; 

for (var i = 0; i < size; i++) { 

var box = elems[i]; 
var height = (window.innerHeight) ? window.innerHeight: document.documentElement.clientHeight; 
box.style.height=(height)+'px'; 
}

演示：http://jsfiddle.net/JRdHD/

來源

2011-12-31 12:42:49 Sotiris

只是一個瘋狂的想法，但嘗試並將'document.getElementsByClassName'存儲在變量中並遍歷它。所以，你知道，在每次循環迭代中，你不必走遍整個DOM樹， – Zirak 2011-12-31 12:46:12

我認爲消除重複的DOM引用是可取的，不是嗎？我想一個變量來存儲來自getElementsByClassName的節點列表，然後遍歷它。每一點幫助。 – thescientist 2011-12-31 12:47:40

是的！完善。有效！非常感謝你！ – hlotvonen 2011-12-31 12:56:51

一個簡單的方法是使用document.write風格的HTML，而頁面被讀取，後鏈接件定義。

<script> 
document.writeln('<style>div.box{height:'+ 
document.documentElement.clientHeight+'px;}'+ 
'<\/style>'); 
</script> 
</head> 

<body...

來源

2011-12-31 16:40:49 kennebec

如何將樣式應用於JavaScript中的類？

回答

相關問題