JavaScript 是一種非常強大的編程語言，可以讓我們動態地修改網頁的樣式和內容。在這篇文章中，我們將探討如何使用 JavaScript 控制網頁中 CSS 的寬度。

在 CSS 中，我們可以使用 width 屬性來控制元素的寬度。例如，我們可以使用以下代碼將一個 div 元素的寬度設置為 500px：

div {
width: 500px;
}

如果您想在 JavaScript 中修改這個 div 元素的寬度，您可以通過以下幾種方式來實現：

1. 修改樣式屬性

您可以使用 JavaScript 修改元素的樣式屬性，從而實現動態改變元素寬度的目的。以下是一個示例代碼：

const div = document.querySelector('div');
div.style.width = '500px';

在這個代碼中，我們首先使用 document.querySelector() 方法選擇了一個 div 元素，然后通過 div.style.width 屬性將其寬度修改為 500px。

2. 添加 CSS 類

另一種實現方式是通過添加 CSS 類來修改元素的樣式。以下是代碼示例：

div.classList.add('my-class');
.my-class {
width: 500px;
}

在這個代碼中，我們首先使用 div.classList.add() 方法向 div 元素添加了一個名為 my-class 的 CSS 類。然后，在 CSS 中，我們定義了 my-class 類，并將其寬度設置為 500px。

3. 使用 CSS 變量

如果您使用的是較新版本的 CSS，您還可以使用 CSS 變量來實現動態改變元素寬度的目的。以下是代碼示例：

:root {
--width: 500px;
}
div {
width: var(--width);
}

在這個代碼中，我們在根元素中定義了一個名為 --width 的 CSS 變量，并將其設置為 500px。然后，在 div 元素中，我們使用 var() 函數引用了該變量，從而將其寬度設置為 --width 變量所定義的值。

以上就是控制 CSS 寬度的三種方法，您可以根據實際應用需要進行選擇。希望這篇文章能夠對您有所幫助。