JavaScript是一種廣泛應用的編程語言,能夠用于頁面的動態交互,其中修改CSS是十分常見的任務。當我們需要修改多個樣式表時,如何讓代碼更加簡潔高效呢?接下來將介紹兩種方法。
第一種方法是使用for循環。我們可以先通過document.querySelectorAll()方法獲取所有需要修改樣式的元素,然后通過for循環逐個修改它們的CSS樣式。
var elements = document.querySelectorAll(".class"); for (var i = 0; i < elements.length; i++) { elements[i].style.color = "red"; elements[i].style.backgroundColor = "blue"; }
以上代碼將class為"class"的所有元素的文字顏色變為紅色,背景顏色變為藍色。
第二種方法是使用CSS類。我們可以預先定義好需要修改的CSS樣式,例如:
.changeColor { color: red; background-color: blue; }
然后通過JavaScript將這個類賦給需要修改樣式的元素即可:
var elements = document.querySelectorAll(".class"); for (var i = 0; i < elements.length; i++) { elements[i].classList.add("changeColor"); }
以上代碼將class為"class"的所有元素增加了名為"changeColor"的CSS類,從而修改了它們的文字顏色和背景顏色。
以上是兩種常見的修改多個樣式表的方法,根據實際情況選擇適合自己的方式即可。