在編寫(xiě)網(wǎng)頁(yè)的過(guò)程中,我們常常需要為網(wǎng)頁(yè)添加一些樣式來(lái)美化頁(yè)面。使用CSS是一種常見(jiàn)的方式。而在HTML中,我們使用<link>標(biāo)簽可以將外部的CSS文件引入到網(wǎng)頁(yè)中,但是在一些小項(xiàng)目中,使用<link>標(biāo)簽會(huì)使網(wǎng)頁(yè)變得過(guò)于臃腫。這時(shí)候,我們可以使用<script>標(biāo)簽來(lái)引入CSS。
<script> var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'style.css'; //引入的CSS文件路徑 document.getElementsByTagName('head')[0].appendChild(link); </script>
上述代碼中,我們首先創(chuàng)建了一個(gè)<link>標(biāo)簽,然后設(shè)置了該標(biāo)簽的rel、type和href屬性。其中,rel屬性表示該標(biāo)簽所連接的文檔與當(dāng)前文檔之間的關(guān)系,type屬性定義了文檔的類(lèi)型,href屬性定義了所引入的CSS文件的位置。接著,我們通過(guò)document對(duì)象的getElementsByTagName方法獲取到head標(biāo)簽,然后將新創(chuàng)建的<link>標(biāo)簽添加到head標(biāo)簽中。這樣,就完成了引入CSS的操作。
通過(guò)使用<script>標(biāo)簽引入CSS,可以避免訪問(wèn)外部文件,減少了HTTP請(qǐng)求次數(shù),提高了網(wǎng)頁(yè)的加載速度,適用于一些小型項(xiàng)目或者對(duì)于性能有要求的項(xiàng)目。然而,在大型項(xiàng)目中,建議還是使用<link>標(biāo)簽來(lái)引入CSS文件。