CSS是一種用來美化頁面的語言,我們可以用它來改變網頁的布局,顏色、字體、大小等。而JavaScript可以使得CSS變得更加靈活、動態。
var elem = document.getElementById("example");
elem.style.color = "red";
elem.style.background = "blue";
在上述代碼中,我們首先獲取了文檔中id為“example”的元素。然后通過修改元素的style屬性來改變該元素的樣式,將其顏色設為紅色,背景設為藍色。
另外,我們還可以在JavaScript代碼中使用CSS偽類、選擇器等以及根據元素的狀態來動態修改樣式。
var button = document.getElementById("button");
button.addEventListener("click", function() {
var elem = document.getElementById("example");
elem.classList.toggle("highlight");
});
在這個代碼中,我們首先獲取了一個按鈕元素并且通過addEventListener添加了一個點擊事件。然后在點擊該按鈕時,我們獲取id為“example”的元素并且在它上面使用了classList.toggle方法。
這個方法可以添加或者刪除一個CSS類。在這個例子中,當我們點擊按鈕時,代碼會在id為“example”的元素上添加一個名為“highlight”的CSS類,從而改變該元素的樣式。
可以看出,JavaScript可以讓CSS樣式更加靈活、動態,需要我們靈活應用。
下一篇css如何使用刪除線