在Web開發(fā)中，CSS樣式表是控制網(wǎng)頁樣式的重要組成部分。通常我們可以在HTML文件中引用CSS樣式表，或者在JavaScript中動態(tài)添加或刪除樣式表。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 控制 CSS 文件引用</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1>Hello World!</h1>
<button id="add-style">添加樣式表</button>
<button id="remove-style">刪除樣式表</button>
<script>
let styleSheet = null;
const addStyle = () => {
if (!styleSheet) {
styleSheet = document.createElement('link');
styleSheet.rel = 'stylesheet';
styleSheet.href = 'style2.css';
document.head.appendChild(styleSheet);
}
};
const removeStyle = () => {
if (styleSheet) {
document.head.removeChild(styleSheet);
styleSheet = null;
}
};
document.getElementById('add-style').addEventListener('click', addStyle);
document.getElementById('remove-style').addEventListener('click', removeStyle);
</script>
</body>
</html>以上代碼演示了如何使用JavaScript控制頁面的樣式表。在頁面加載時，我們通過<link>標(biāo)簽引入了style1.css，該樣式表設(shè)置了頁面元素的初始樣式。
在JavaScript中，我們通過動態(tài)創(chuàng)建<link>標(biāo)簽并添加到頁面頭部，來添加新的樣式表。例如，在點擊按鈕時，我們動態(tài)創(chuàng)建了名為style2.css的樣式表并添加到了頁面頭部，從而實現(xiàn)了修改頁面樣式的目的。
除了添加樣式表，我們還可以通過移除<link>標(biāo)簽，從而刪除指定的樣式表。以上代碼演示了如何在點擊另一個按鈕時，移除樣式表。
通過這種方式，我們可以實現(xiàn)JS控制CSS文件引用的效果。