在開發(fā)網(wǎng)頁的過程中，我們經(jīng)常會遇到需要加載不同的 CSS 文件的情況。這可以讓我們在不同設(shè)備或不同頁面中使用不同的樣式，提升用戶體驗(yàn)。在 JavaScript 中，我們可以通過以下幾種方式加載 CSS 文件。

// 方式一：使用 DOM 操作動態(tài)添加 link 標(biāo)簽
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'path/to/your/css/file.css';
document.head.appendChild(link);

這種方式使用了 DOM 操作動態(tài)添加 link 標(biāo)簽，其優(yōu)點(diǎn)在于可以在任意位置動態(tài)添加 CSS 文件，但其缺點(diǎn)在于瀏覽器需要重新請求并下載該文件，可能會增加頁面請求次數(shù)。

// 方式二：使用 document.write 輸出 link 標(biāo)簽
document.write('');

這種方式使用了 document.write 輸出 link 標(biāo)簽，其優(yōu)點(diǎn)在于可以在加載該 JavaScript 文件時同時加載 CSS 文件，但其缺點(diǎn)在于需要在頁面加載時即時輸出 HTML，容易引起頁面渲染問題。

// 方式三：使用 XMLHttpRequest 請求 CSS 文件內(nèi)容并動態(tài)添加 style 標(biāo)簽
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
const style = document.createElement('style');
style.innerHTML = this.responseText;
document.head.appendChild(style);
}
};
xhr.open('GET', 'path/to/your/css/file.css', true);
xhr.send();

這種方式使用了 XMLHttpRequest 請求 CSS 文件的內(nèi)容，并動態(tài)添加了 style 標(biāo)簽，其優(yōu)點(diǎn)在于只需要請求該文件內(nèi)容，不需要重新下載，因此可以減少頁面請求次數(shù)。但其缺點(diǎn)在于需要處理跨域問題。