JavaScript是一門強大的編程語言，在網頁開發中極為常見。JavaScript與HTML和CSS結合使用可以實現許多驚人的效果，例如動態改變寬度。 改變寬度在Web設計中是一項非常有用的特性。通過使用JavaScript，我們可以在滾動條、導航欄或其他元素中以動態方式改變寬度。以下是幾個實際應用案例。

1. 改變滾動條寬度

window.onload = function(){
document.getElementById('myScroll').style.width = '50%';
}

以上代碼將在網頁加載完成后自動執行，將ID名為"myScroll"的滾動條的寬度改為50%。

2. 動態調整導航欄寬度

window.onload = function(){
var navbar = document.getElementById('navbar');
var links = navbar.getElementsByTagName('a');
var totalWidth = 0;
for (var i = 0; i< links.length; i++) {
totalWidth += links[i].offsetWidth;
}
navbar.style.width = totalWidth + 'px';
}

以上代碼將在網頁加載完成后自動執行。它首先查找ID名為"navbar"的元素，然后搜索所有鏈接的寬度并將它們加在一起。最后，它將navbar元素的寬度設置為鏈接總寬度。

3. 鼠標懸停動態展開元素

window.onload = function(){
var element = document.getElementById('myElement');
element.onmouseover = function(){
this.style.width = '500px';
}
element.onmouseout = function(){
this.style.width = '200px';
}
}

以上代碼將在網頁加載完成后自動執行。它查找ID名為"myElement"的元素，并將鼠標懸停事件與onmouseover和onmouseout函數關聯。當鼠標懸停在元素上時，它將改變元素的寬度，當鼠標移開時，它將把寬度還原回200px。

總結

通過JavaScript改變寬度可以讓我們的網頁更加生動，更有吸引力。 上述幾個例子展示了一些常見的技巧，但您并不局限于這些。JavaScript是一門極其靈活的語言，您可以使用它自由地探索和嘗試各種奇思妙想。