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