在前端開發中，JavaScript (JS) 通常用于更新和調整網頁的外觀和交互性。其中一種常見的技術是通過 JS 動態添加 CSS 塊。這種技術可以讓頁面加載更快，減少 HTTP 請求次數，同時還可以優化代碼的可維護性并提高代碼的可讀性。

在 JS 中，我們可以使用以下函數將 CSS 塊添加到現有 HTML 頁面中：

function addCSS(css) {
var head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}

以上函數會將傳遞給它的 CSS 串加入到現有 HTML 頁面的 head 中。如果您希望將 CSS 添加到在 HTML 頁面中的另一個位置，可以輕松更改此函數。

例如，您可以將上述函數用于動態添加一組 CSS 塊，如下所示：

addCSS('body { background: #dff0d8; }');
addCSS('.header { background: #000; color: #fff; }');
addCSS('.footer { background: #333; color: #fff; font-size: 1.2rem; }');

以上代碼會將背景顏色、文字顏色等 CSS 屬性指定到對應的選擇器上。

總之，通過 JS 動態添加 CSS 塊是一種優秀的前端技術，可以幫助您調整網頁的外觀和交互性，并且非常方便易用。