作為一門動態編程語言，JavaScript（簡稱JS）是Web開發中非常重要的一部分。它可以在Web頁面上產生交互效果，而不是只顯示靜態信息。JS可以通過更改相應元素的屬性來操作網頁，其中包括樣式屬性。接下來，我們將詳細介紹如何使用JavaScript來寫樣式。

首先，我們需要知道如何在JS中選取一個HTML元素，然后對它應用樣式。可以使用document.getElementById()方法獲取HTML元素，并用.style屬性修改其樣式。

<script>
 var example = document.getElementById("example");
 example.style.backgroundColor = "yellow";
</script>
<div id="example">
 This element will have yellow background color after running the script.
</div>

上面的代碼將獲取id為“example”的 HTML元素，并將其背景色設置為黃色。這種方式可以通過JS來動態更改樣式，而無需手動修改CSS文件。除了設置背景色，我們還可以使用.style屬性設置其他的樣式屬性。比如：

var example = document.getElementById("example");
 example.style.color = "red";
 example.style.fontSize = "20px";
 example.style.padding = "10px";

上面的代碼將修改元素的字體顏色、字體大小以及padding。同樣，也可以通過.style屬性修改邊框樣式等其他屬性。

還有一種更方便的方式可以為HTML元素設置樣式。通過使用class名稱或者標簽名稱來選擇元素，然后為其添加/刪除className屬性即可，CSS樣式表為元素設置的樣式將隨之變化。

<script>
 var elms = document.getElementsByTagName("p");
 for(var i = 0; i< elms.length; i++){
elms[i].classList.add("para-style");
 }
var example = document.getElementById("example");
 example.classList.toggle("my-class");
</script>
<style>
 .para-style {
color: blue;
font-size: 16px;
 }
.my-class {
background-color: grey;
border: 1px solid black;
 }
</style>
<p>
 This paragraph has class "para-style", which applies blue color and font size 16px.
</p>
<div id="example" class="my-class">
 This element has class "my-class", which applies grey background and black border.
</div>

上述代碼演示了通過JS為HTML元素添加class或刪除class。當點擊id為example的div元素時，它的class為my-class將被添加或刪除。這個類定義了背景色為灰色和黑色邊框。此外，通過使用class選擇器，我們可以同時為多個元素應用相同的樣式，從而優化HTML代碼。

總之，使用JavaScript可以通過幾種方法來為HTML元素設置樣式。這為開發提供了更大的靈活性，并能讓應用更多的動態性，提高用戶體驗。