動態修改CSS變量是現代Web開發中的基本技巧之一，因為它可以讓我們在頁面DOM結構不變的情況下，實時改變可視效果。下面我們就來看看如何使用JavaScript實現動態修改CSS變量。 首先在CSS中定義需要修改的變量，如下所示：

:root {
--primary-color: #4285f4;
--secondary-color: #0f9d58;
}

這里我們定義了兩個變量primary-color和secondary-color。注意，在:root選擇器內定義變量可以讓其在全局范圍內使用。 接下來，我們可以在頁面上使用這些變量，如下所示：

p {
color: var(--primary-color);
background-color: var(--secondary-color);
}

這里我們定義一個段落元素，并且指定了其顏色和背景色分別使用primary-color和secondary-color變量。現在，我們可以通過JavaScript實時修改這些變量的值，從而實現動態改變可視效果的目的。例如：

var root = document.documentElement;
root.style.setProperty('--primary-color', '#db4437');
root.style.setProperty('--secondary-color', '#f4b400');

這里我們獲取了文檔根節點的引用，然后使用style.setProperty()方法修改變量的值。在這個例子中，我們將primary-color變量修改為#db4437，將secondary-color變量修改為#f4b400。 總之，動態修改CSS變量可以讓我們實現非常靈活的可視效果控制，而且不需要動態改變DOM結構。希望以上內容可以對你有所幫助。