在網頁設計中，樣式是非常重要的。通過樣式，我們可以改變網頁中的字體、顏色、大小、背景等元素，從而打造一個專業、美觀的網頁。其中，JavaScript是一個非常強大的工具，可以動態地添加樣式，為網頁注入更多的活力和個性。今天，我們來學習一下如何使用JavaScript動態添加樣式。 一、動態添加樣式的基本原理 動態添加樣式，實際上就是使用JavaScript來動態創建和操作CSS規則。DOM中有一組對象，可以通過它們來直接修改CSS樣式，這就是樣式對象。通過樣式對象，我們可以修改HTML元素的CSS樣式，從而達到動態添加樣式的目的。 二、動態添加樣式的方法 動態添加樣式有多種方法，我們可以使用JS來直接改變元素的style屬性、或者使用JS來操作樣式表。其中，操作樣式表是最為常用和通用的方法。 1.動態添加樣式 - 修改元素的style屬性 當我們需要修改一個元素的CSS樣式時，可以直接通過JavaScript來改變它的style屬性。比如，下面的代碼就是通過JS來改變元素的字體顏色：

var ele = document.getElementById("myElement");
ele.style.color = "blue";

這樣，我們就成功地將myElement元素的字體顏色修改為了藍色。不過，這種方法只適用于需要動態改變CSS屬性值的情況，而且改變的是元素的內聯樣式，對于全局更改無法生效。 2.動態添加樣式 - 操作樣式表 在CSS中，有兩種方式來定義樣式：內聯樣式和外部樣式表。內聯樣式是指將CSS直接寫在HTML標簽中的style屬性中，而外部樣式表則是將CSS規則單獨定義在一個.CSS文件中，通過link或@import引入。修改內聯樣式是比較容易的，但如果需要修改外部樣式表中的樣式，就需要使用操作樣式表的方法了。 操作樣式表有以下步驟： 1）獲取樣式對象 使用下面的代碼可以獲取到樣式對象：

var style = document.styleSheets[0];

這里的document.styleSheets[0]表示返回文檔中第一個樣式表。 2）添加新的樣式規則 可以通過addRule或insertRule方法來向樣式表中添加新的CSS規則。例如，我們可以通過下面代碼向樣式表中添加一個新的規則，將所有a標簽的顏色設置成紅色：

if (style.addRule) {
style.addRule("a", "color: red");
} else {
style.insertRule("a { color: red }", style.cssRules.length);
}

上面的代碼中，if (style.addRule)表示如果瀏覽器支持addRule方法，就使用addRule向樣式表添加新的規則；否則，就使用insertRule方法添加新的規則。addRule方法的第一個參數是選擇器，第二個參數是一個包含CSS屬性的字符串。而insertRule方法則接受兩個參數：要添加的CSS規則和規則要插入的位置。 3）修改現有的樣式規則 如果需要修改已有的樣式規則，則可以直接修改已有的CSS屬性值。例如，下面的代碼將所有p元素的字體粗細修改為bold：

for (var i = 0; i< style.cssRules.length; i++) {
if (style.cssRules[i].selectorText == "p") {
style.cssRules[i].style.fontWeight = "bold";
}
}

使用上面的代碼，我們可以輕松地動態添加和修改CSS樣式，為網頁注入更多的動態效果和個性。