在前端開發中，我們經常需要切換頁面的樣式，通過JavaScript獲取并切換CSS文件是一種常見的實現方式。
首先，在HTML中引入不同的CSS文件：
<head> <link rel="stylesheet" href="style1.css"> <link rel="stylesheet" href="style2.css"> </head>
有了不同的CSS文件，接下來可以通過JavaScript獲取并切換它們。
首先，需要在JavaScript中選擇要操作的樣式表，可以使用以下代碼：
var styleSheets = document.styleSheets;
var styleSheetToSwitch;
for (var i = 0; i< styleSheets.length; i++) {
var href = styleSheets[i].href;
if (href.indexOf('style1.css') !== -1) { // 判斷是否為要切換的樣式表
styleSheetToSwitch = styleSheets[i];
break;
}
}上述代碼中，首先通過document.styleSheets獲取到了所有的樣式表，然后遍歷每個樣式表的href屬性，判斷是否為要切換的樣式表，如果是，則將其保存到變量styleSheetToSwitch中。
接下來，可以使用以下代碼來切換樣式表：
styleSheetToSwitch.disabled = true; // 禁用當前樣式表
var newStyleSheet = document.createElement('link'); // 創建新樣式表節點
newStyleSheet.rel = 'stylesheet';
newStyleSheet.href = 'style2.css'; // 切換到新的樣式表
document.head.appendChild(newStyleSheet); // 添加新的樣式表節點到標簽中以上代碼中，首先禁用當前的樣式表，然后創建一個新的節點，將其href屬性設置為要切換到的樣式表路徑，然后將其添加到
標簽中即可。通過以上的代碼，就可以在頁面中實現切換不同的樣式表了。
上一篇html5背景顏色設置
下一篇js獲取不到css賦值