JavaScript無疑是目前網頁開發最為流行的語言之一，作為一門腳本語言，它能很好地增強網頁的交互性和動態性。在這里我們來學習一下如何用JavaScript做一個簡單的紅色顏色條。

首先，我們需要在HTML中創建一個div元素，設置它的寬度和高度以及背景顏色為紅色。代碼如下：

<div style="width:100px;height:20px;background-color:red;"></div>

這段代碼會在頁面上生成一個寬度為100像素，高度為20像素，背景顏色為紅色的div。

接下來，我們用JavaScript來動態地改變這個div的寬度。我們可以通過document.getElementById方法獲取這個div元素，然后設置其style.width屬性值為我們想要的寬度。例如，我們希望將它的寬度設置為200像素，則代碼如下：

<script>
var redBar = document.getElementById("red-bar");
redBar.style.width = "200px";
</script>
<div id="red-bar" style="width:100px;height:20px;background-color:red;"></div>

可以看到，我們給這個div設置了一個id屬性，用來獲取它的引用。然后，我們將這個引用存儲在變量redBar中，然后設置其style.width的值為200像素。這個div就會根據我們設定的寬度進行動態變化。

除了直接設置div的style.width屬性，我們還可以通過CSS樣式表來設置這個值。代碼如下：

<style>
#red-bar{
width:100%;
height: 20px;
background-color: red;
}
</style>
<script>
var redBar = document.getElementById("red-bar");
redBar.style.width = "50%";
</script>
<div id="red-bar"></div>

這段代碼里，我們使用了CSS樣式表來設置div的樣式，然后在JavaScript中動態設置它的寬度。這個div的width屬性設置為100%，表示它的寬度是其父元素的寬度。然后我們在JavaScript中將其寬度設置為50%，這樣它就能按照50%的比例動態變化。

上述代碼也可以改寫為純CSS實現：

<style>
#red-bar{
width:100%;
height: 20px;
background-color: red;
transition: width 1s ease-in-out;
}
#red-bar.active{
width:50%;
}
</style>
<div id="red-bar"></div>
<script>
var redBar = document.getElementById("red-bar");
redBar.classList.add("active");
</script>

這段代碼中，我們利用CSS3的transition屬性來實現動態效果，將其設置在原本的樣式中。transition屬性可以設置某個CSS屬性發生變化時的動畫效果，在這里我們將width屬性的動畫效果設置為1秒的ease-in-out動畫。然后我們再為這個div設定一個.active類，在JavaScript中通過給這個div添加.active類來動態改變其寬度。

總結一下，我們可以通過JavaScript來動態改變一個div元素的樣式，從而實現動態效果。我們需要注意的是，JavaScript改變元素樣式的時候，要盡量減少重繪和回流的次數，以免降低網頁的性能。