JavaScript是一種用于網頁開發的編程語言，它可以讓網站更加交互動態。在JavaScript中，我們可以通過修改CSS屬性來改變網頁的樣式，使得網頁更加美觀和動感。今天，我們來學習一下如何使用JavaScript來修改CSS屬性。

在JavaScript中，我們可以使用document對象訪問HTML文檔中的元素。要修改元素的CSS屬性，我們可以使用style屬性，它可以讓我們直接訪問元素的CSS樣式。

// 獲取元素
var ele = document.getElementById("box");
// 修改CSS屬性
ele.style.backgroundColor = "red";
ele.style.width = "100px";

上面的代碼中，我們首先使用document.getElementById()方法獲取ID為“box”的元素，然后使用style屬性來修改它的CSS樣式。在本例中，我們先將元素的背景色設置為紅色，然后將元素的寬度設置為100像素。

另外，我們還可以使用setAttribute()方法來修改元素的CSS屬性。這種方式可以讓我們在不同的CSS屬性之間進行相互轉換。

// 獲取元素
var ele = document.getElementById("box");
// 修改CSS屬性
ele.setAttribute("style", "background-color: red; width: 100px;");

上面的代碼中，我們同樣是先使用document.getElementById()方法獲取ID為“box”的元素，然后使用setAttribute()方法來修改它的CSS屬性。在本例中，我們將CSS屬性設置為“background-color: red; width: 100px;”，這個字符串中包含了元素的背景色和寬度。這種方法與使用style屬性相比，可以在不同的CSS屬性之間進行相互轉換，更加靈活。

通過以上的示例，我們可以看到JavaScript可以很方便地修改HTML文檔中的CSS屬性，使得網站更加美觀和動感。我們可以根據實際需要選擇使用style屬性或者setAttribute()方法來修改CSS屬性，以達到最佳的效果。