在前端開發的過程中，我們通常會使用CSS樣式表來美化界面。而引入CSS樣式表的方式有兩種：靜態引入和動態引入。靜態引入是將CSS樣式表文件直接鏈接在HTML文件內，頁面一加載就會加載CSS樣式表；動態引入則是在頁面完成加載之后，通過JavaScript動態創建標簽來引入CSS樣式表。本文將介紹動態引入CSS樣式表的具體實現方法。

首先，在HTML文件中，我們需要添加一個按鈕元素，點擊這個按鈕才會觸發動態引入CSS樣式表的操作。代碼如下：

加載CSS樣式表

在JavaScript文件中，我們先獲取這個按鈕元素，并添加一個點擊事件監聽。每次點擊按鈕時，都會觸發一個函數，該函數會動態創建一個標簽，并將CSS樣式表的路徑添加到標簽的href屬性中，最后將標簽添加到HTML文件中的標簽內即可。代碼如下：

const loadCSS = () =>{
const cssLink = document.createElement("link");
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
cssLink.href = "css/styles.css"; // CSS樣式表的路徑
document.head.appendChild(cssLink);
}
const loadBtn = document.getElementById("load-css-btn");
loadBtn.addEventListener("click", loadCSS);

在上面的代碼中，我們首先創建了一個名為loadCSS的函數，該函數會創建一個標簽，并將相關屬性添加到標簽內。在創建完成后，我們將這個標簽添加到HTML文件內的標簽內。在監聽到按鈕被點擊后，我們就會觸發loadCSS函數，并動態引入CSS樣式表文件。

除了上面的代碼，我們還可以通過AJAX請求來動態引入CSS樣式表。這種方法需要在HTML文件中引入jQuery庫。代碼如下：

const loadCSS = () =>{
$.ajax({
url: "css/styles.css", // CSS樣式表的路徑
success: function(css) {
const cssLink = document.createElement("style");
cssLink.type = "text/css";
cssLink.innerHTML = css;
document.head.appendChild(cssLink);
}
});
}
const loadBtn = document.getElementById("load-css-btn");
loadBtn.addEventListener("click", loadCSS);

在上面的代碼中，我們使用了jQuery庫中的$.ajax方法來請求CSS樣式表文件。請求成功后，我們再通過創建一個