從DOM中讀取很多元素

我知道JS的基本知識，但我想把它作爲下一步。從DOM中讀取很多元素

我想在很多元素的JS幫助下改變CSS。問題是，我知道要選擇元素的唯一方法是

const name = document.getElement...(id/class/tag etc.);

所以我可以在以後通過它的名字指的是元素，並通過改變它的風格：

name.style.cssproperty = "something";

這是好的，但是當我已經有10個元素時，我覺得這樣做效率很低。

所以我的問題是，有沒有更好的方式來更有效地動態改變CSS，所以我的代碼開始看起來並不像這樣：

const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
const name = document.getElement...(id/class/tag etc.); 
etc...

或者是正常的，有這麼多的變數？

我希望我的問題可以理解。

PS：

我剛開始學習模塊化JavaScript！這對我的問題有什麼幫助嗎？

來源

2016-12-01 Balázs Orbán

您可能想要使用：數組，對象，for循環和'document.querySelectorAll'。所有人都說，你也可能想盡可能避免修改'style'，而只是傾向於切換類。 – zzzzBov

你試圖改變的CSS的本質是什麼？這一切都非常相似嗎？正如@zzzzBov所說的，最好的方法是使用你在樣式表中創建的類。 –

例如，請參閱此鏈接，瞭解如何通過類名稱獲取多個元素，然後按照任意條件過濾得到的數組https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName – user44

您可以獲取由給定課程的所有元素：

const elements = document.querySelectorAll('my-class');

現在，你可以通過提取的元素循環：

for (var i = 0; i < elements.length; i++) { 
    elements[i].style.cssproperty = "something"; 
}

或者，如果ES6 +是在你的環境中可用：

elements.forEach(element => element.style.cssproperty = "something");

來源

2016-12-01 22:44:09

從DOM中讀取很多元素

回答

相關問題