JS是前端工程師必須掌握的技能之一，它可以實現頁面的動態變化，其中就包括動態追加CSS的功能。下面我們來一起學習一下如何使用JS動態追加CSS。

//獲取head元素
var head = document.getElementsByTagName('head')[0];
//創建一個link標簽
var link = document.createElement('link');
//設置link標簽的屬性
link.href = 'style.css';
link.rel = 'stylesheet';
//將link標簽添加到head中
head.appendChild(link);

以上代碼中，我們通過JS獲取了代表head元素的對象，然后創建了一個link標簽，并設置了它的href和rel屬性，最后將它添加到了head元素中。這樣就可以將style.css樣式表動態追加到頁面中。

通過動態追加CSS，我們可以在不刷新頁面的情況下實現頁面的樣式變化，極大地提升了用戶體驗。比如，我們可以通過JS獲取運行環境的一些信息，然后根據這些信息動態更改頁面的樣式。比如以下代碼：

//獲取屏幕寬度
var screenWidth = window.innerWidth;
//獲取head元素
var head = document.getElementsByTagName('head')[0];
//創建一個style標簽
var style = document.createElement('style');
//設置style標簽的內容
style.innerHTML = '@media screen and (max-width: 768px) { body { background-color: yellow; } }';
//如果屏幕寬度小于等于768px，則將style標簽添加到head中
if(screenWidth<= 768) {
head.appendChild(style);
}

以上代碼中，我們獲取了當前運行環境屏幕的寬度，然后通過JS判斷寬度是否小于等于768px，如果是，則動態添加了一段CSS樣式，改變body的背景色為黃色。這樣，就可以根據不同設備的屏幕寬度來動態調整頁面的樣式，讓頁面更加適配不同的設備。