在開發(fā)網(wǎng)頁時(shí)，我們經(jīng)常需要切換不同的 CSS 樣式，以達(dá)到不同的展示效果。下面我們來學(xué)習(xí)一下如何實(shí)現(xiàn)切換 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>在這個(gè)例子中，我們定義了兩個(gè)不同的樣式表 `style1` 和 `style2`，并通過 JavaScript 中的 `toggleCSS` 函數(shù)來實(shí)現(xiàn)切換。該函數(shù)的參數(shù)為兩個(gè)樣式表的 ID，當(dāng)點(diǎn)擊按鈕時(shí)會(huì)在兩個(gè)樣式表之間進(jìn)行切換。具體實(shí)現(xiàn)方式是，當(dāng) `style1` 未被禁用時(shí)，將其禁用，并啟用 `style2`，反之亦然。
除了 JavaScript 實(shí)現(xiàn)切換 CSS 外，還可以通過改變 HTML 標(biāo)簽的 `class` 屬性來實(shí)現(xiàn)動(dòng)態(tài)切換樣式。例如：
<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>在這個(gè)例子中，我們定義了兩個(gè)不同的樣式類 `style1` 和 `style2`，并通過 JavaScript 中的 `toggleClass` 函數(shù)來實(shí)現(xiàn)切換。該函數(shù)會(huì)獲取 `body` 標(biāo)簽的 `class` 屬性，然后在 `style1` 和 `style2` 之間進(jìn)行切換。
無論是哪種方式，切換 CSS 的實(shí)現(xiàn)都需要在 HTML 中定義多個(gè)不同的樣式，然后通過 JavaScript 在不同樣式之間切換。