在Web開發中,JavaScript(簡稱JS)是一種常見的腳本語言,而CSS(層疊樣式表)是一種用來控制HTML元素樣式的語言。在某些場景下,我們需要通過JS來更改CSS。
要修改CSS全部標簽,我們可以使用JS中的document.querySelectorAll()
方法,它可以返回所有匹配指定CSS選擇器的元素列表。例如,下面的代碼將更改所有段落元素的字體大小為14像素:
var pElements = document.querySelectorAll('p'); for (var i = 0; i< pElements.length; i++) { pElements[i].style.fontSize = '14px'; }
在上面的代碼中,我們先使用document.querySelectorAll('p')
選擇所有段落元素,并將它們存儲在一個名為pElements
的變量中。然后,我們使用for
循環遍歷pElements
數組,并使用style.fontSize
屬性來更改字體大小。
除了字體大小,我們還可以使用style
屬性來更改許多其他的樣式:例如,background-color
(背景色)、border
(邊框)、color
(顏色)等等。例如,下面的代碼將更改所有段落元素的背景色為紅色:
var pElements = document.querySelectorAll('p'); for (var i = 0; i< pElements.length; i++) { pElements[i].style.backgroundColor = 'red'; }
在修改CSS樣式時,我們應該注意某些風格屬性需要使用連字符而不是駝峰式命名。例如,background-color
而不是backgroundColor
。
上一篇html5設置圓的背景
下一篇js為元素添加css樣式