在網頁設計中,CSS樣式表是必不可少的一部分。通常情況下,我們會在HTML文件中通過指定標簽引入CSS文件,然后在瀏覽器啟動時加載它。但是,有時候我們需要在代碼運行時動態地加載CSS樣式表,這就需要用到動態加載CSS腳本。
function loadCSS(url){ var link = document.createElement("link"); link.rel = "stylesheet"; link.href = url; document.head.appendChild(link); } loadCSS("style.css");
這段JavaScript代碼會創建一個標簽,并指定它的rel屬性為“stylesheet”,href屬性則為我們想要引用的CSS文件的URL地址,然后將這個標簽添加到HTML文檔的
部分,從而實現CSS樣式表的加載。動態加載CSS腳本的另一個常見的應用場景是在響應不同設備的屏幕大小時加載不同的CSS樣式表。例如,我們可以在移動設備上加載一份針對小屏幕的CSS樣式表,而在PC端加載一份適合大屏幕的樣式表。
function loadCSSByScreenSize(){ var screenSize = window.innerWidth; var url = screenSize< 768 ? "small-screen.css" : "large-screen.css"; loadCSS(url); } loadCSSByScreenSize();
這段代碼會根據當前設備屏幕的大小來決定加載哪一份CSS樣式表。如果屏幕寬度小于768像素,則加載針對小屏幕的樣式表“small-screen.css”,否則加載適合大屏幕的樣式表“large-screen.css”。
總之,動態加載CSS腳本是一個非常有用的工具,可以幫助我們在開發網頁時更加靈活和高效地處理CSS樣式表加載的問題。