JavaScript是一種廣泛應用于網頁開發中的腳本語言，它具有一定的編程能力，可以通過操作DOM（文檔對象模型）實現對網頁的可視化操作，其中修改元素的樣式（style）是非常常見的一種操作。本文將介紹如何使用JavaScript修改元素樣式，并通過具體實例進行說明。

首先，我們需要了解元素的樣式是由CSS樣式表定義的，其作用是為HTML元素添加樣式。而JavaScript可以通過操作style屬性訪問和修改元素的CSS樣式。下面是一個簡單的示例，我們通過JavaScript將一個文本框的背景色設為藍色：

//JavaScript代碼
document.getElementById("txt").style.backgroundColor = "blue";

在該例中，我們使用getElementById方法獲取了一個id為"txt"的文本框元素，然后通過style屬性來修改該元素的背景顏色。需要注意的是，style屬性中的"background-color"在JavaScript中應該替換為"backgroundColor"，且賦值時應使用駝峰式寫法。

除了通過style屬性來直接修改元素的CSS樣式外，我們還可以使用其他方法來實現更靈活的樣式管理，下面列舉幾種常見的方法：

1. classList屬性：該屬性可以獲取或修改元素的class屬性值，從而間接地修改元素的CSS樣式。

//JavaScript代碼
var box = document.querySelector(".box");
box.classList.add("blue");

在該例中，我們通過querySelector方法獲取了一個class為"box"的DIV元素，然后通過classList屬性添加了一個class為"blue"的樣式類，從而實現背景色變為藍色的效果。

2. style.cssText屬性：該屬性可以一次性修改多個CSS樣式屬性，適用于需要同時修改多個樣式屬性的情況。

Hello World
//JavaScript代碼
var box = document.querySelector(".box");
box.style.cssText = "font-size:16px; color:green;";

在該例中，我們通過querySelector方法獲取了一個class為"box"的DIV元素，然后通過style.cssText屬性一次性修改了字體大小和字體顏色，從而實現了Hello World的字體變大字體顏色變為綠色的效果。

3. getComputedStyle方法：該方法可以獲取元素的計算樣式屬性，可用于獲取元素實時計算后的樣式屬性。

//JavaScript代碼
var box = document.querySelector(".box");
var width = window.getComputedStyle(box, null).getPropertyValue("width");
alert(width); //輸出：100px

在該例中，我們通過querySelector方法獲取了一個class為"box"的DIV元素，然后通過getComputedStyle方法獲取了其實時計算后的寬度，從而輸出"100px"。

總之，通過JavaScript修改元素的樣式（style）是實現網頁動態效果和交互功能的必備技能之一，在實際開發中也是經常會用到的技能。尤其在單頁面開發和移動端開發中，更是必不可少的技能。希望本文能夠對大家有所幫助。