動(dòng)態(tài)引入css是指在網(wǎng)頁加載過程中，通過JavaScript代碼將css文件動(dòng)態(tài)插入到網(wǎng)頁中，使網(wǎng)頁在運(yùn)行時(shí)達(dá)到樣式修改的效果。下面我們來介紹一下如何實(shí)現(xiàn)動(dòng)態(tài)引入css。
首先，在HTML中需要準(zhǔn)備好用來展示頁面的DOM結(jié)構(gòu)和相關(guān)內(nèi)容，如下所示：
<!DOCTYPE html> <html> <head> <title>動(dòng)態(tài)引入css</title> </head> <body> <h1>這是動(dòng)態(tài)引入css的實(shí)例</h1> <p id="content">這是一段樣式待修改的文字</p> </body> </html>其中，我們需要修改的樣式內(nèi)容是使用了id="content"的p標(biāo)簽中的文字。 接下來，在JavaScript中進(jìn)行樣式修改的操作。首先需要先創(chuàng)建一個(gè)link元素，來加載待引入的css文件，具體代碼如下：
var link=document.createElement('link');
link.rel='stylesheet';
link.href='style.css';
link.type='text/css';上面的代碼中，我們先通過document.createElement()方法創(chuàng)建了一個(gè)link元素，并分別設(shè)置了rel、href、type三個(gè)屬性。
接下來，我們需要將link元素添加到head中，使其能夠被網(wǎng)頁所引用。具體代碼如下：var head=document.getElementsByTagName('head')[0];
head.appendChild(link);通過上面的代碼，我們使用了document.getElementsByTagName()方法獲取了head元素，然后通過appendChild()方法將link元素添加到head元素中。
最后，我們需要使用JavaScript代碼來修改樣式。修改操作如下：var content=document.getElementById('content');
content.style.color='red';
content.style.fontSize='20px';通過獲取id為content的p標(biāo)簽元素，然后使用style屬性來對(duì)文字進(jìn)行樣式修改，將其顏色修改為紅色，字體大小修改為20px。
綜上所述，通過創(chuàng)建link元素、添加到head標(biāo)簽中、再通過代碼操作對(duì)應(yīng)樣式屬性，我們就可以實(shí)現(xiàn)動(dòng)態(tài)引入css的操作了。