在開發網頁時，我們經常需要切換不同的 CSS 樣式，以達到不同的展示效果。下面我們來學習一下如何實現切換 CSS。
<head>
<style id="style1">
body {
background-color: #fff;
color: #000;
}
</style>
<style id="style2">
body {
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<button onclick="toggleCSS('style1', 'style2')">切換樣式</button>
</body>
<script>
function toggleCSS(css1, css2) {
var style1 = document.getElementById(css1);
var style2 = document.getElementById(css2);
if (style1.disabled) {
style1.disabled = false;
style2.disabled = true;
} else {
style1.disabled = true;
style2.disabled = false;
}
}
</script>在這個例子中，我們定義了兩個不同的樣式表 `style1` 和 `style2`，并通過 JavaScript 中的 `toggleCSS` 函數來實現切換。該函數的參數為兩個樣式表的 ID，當點擊按鈕時會在兩個樣式表之間進行切換。具體實現方式是，當 `style1` 未被禁用時，將其禁用，并啟用 `style2`，反之亦然。
除了 JavaScript 實現切換 CSS 外，還可以通過改變 HTML 標簽的 `class` 屬性來實現動態切換樣式。例如：
<head>
<style>
.style1 {
background-color: #fff;
color: #000;
}
.style2 {
background-color: #000;
color: #fff;
}
</style>
</head>
<body class="style1">
<button onclick="toggleClass()">切換樣式</button>
</body>
<script>
function toggleClass() {
var body = document.getElementsByTagName('body')[0];
body.classList.toggle('style1');
body.classList.toggle('style2');
}
</script>在這個例子中，我們定義了兩個不同的樣式類 `style1` 和 `style2`，并通過 JavaScript 中的 `toggleClass` 函數來實現切換。該函數會獲取 `body` 標簽的 `class` 屬性，然后在 `style1` 和 `style2` 之間進行切換。
無論是哪種方式，切換 CSS 的實現都需要在 HTML 中定義多個不同的樣式，然后通過 JavaScript 在不同樣式之間切換。
上一篇mysql一個億數據
下一篇jquery css名稱