當我們想要通過JavaScript來修改CSS樣式時,可以使用以下方法:
//獲取需要修改CSS的元素 var cssElement = document.querySelector("需要修改的元素"); //通過修改元素的style屬性來修改CSS屬性值 cssElement.style.property = "value";
其中,property為需要修改的CSS屬性,value為屬性所需的值。
例如,如果我們想要修改一個元素的背景顏色為紅色:
var cssElement = document.querySelector("需要修改的元素"); cssElement.style.backgroundColor = "red";
又或者,我們想要在按鈕被點擊時,修改一個元素的寬度為200像素:
var cssElement = document.querySelector("需要修改的元素"); var button = document.querySelector("按鈕的選擇器"); button.addEventListener("click", function() { cssElement.style.width = "200px"; });
除了使用style屬性之外,我們還可以使用classList來添加、刪除、切換CSS類。
例如,我們有一個按鈕,需要點擊之后切換一個元素的CSS類:
var cssElement = document.querySelector("需要修改的元素"); var button = document.querySelector("按鈕的選擇器"); button.addEventListener("click", function() { cssElement.classList.toggle("需要切換的CSS類名"); });
在這個例子中,使用了toggle方法來切換指定的CSS類。也可以使用add方法來添加CSS類,remove方法來刪除CSS類。
上一篇html5設置列表顏色
下一篇js做表格的css樣式