在前端開發中,有時候需要根據某些條件來動態引入不同的CSS文件。這時候,我們可以使用JavaScript的條件判斷語句來實現。
if(條件){ var link = document.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("href", "樣式文件路徑"); document.head.appendChild(link); }
上面的代碼中,我們使用if語句判斷條件是否成立,如果條件成立,就創建一個link元素,并設置rel、href屬性,最后將該元素添加到
標簽中,即可動態引入指定的CSS文件。例如,我們要在頁面寬度小于等于800px時引入一個名為small-screen.css的樣式文件,可以這樣寫:
if(window.innerWidth<= 800){ var link = document.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("href", "small-screen.css"); document.head.appendChild(link); }
當頁面寬度小于等于800像素時,就會動態引入small-screen.css文件。
除了判斷頁面寬度外,還可以根據其他條件來動態引入CSS文件,比如判斷是否是移動設備、是否支持某些特性等等。只要能夠用JavaScript判斷的條件,就可以用來動態引入CSS文件。
下一篇html5表單新代碼