承接上文 https://www.cnblogs.com/wangxi01/p/10641210.html，下面是第三個案例：

主要要實現的是移動上面的input range，改變下面圖標的樣式。以下為我註釋後的源碼：

/* :root選擇器,等同於html */
:root {
    /* css變量 */
    /* 作用域：可以在多個選擇器內聲明。讀取的時候，優先級最高的聲明生效 */
    /* 可使用@support命令進行檢測是否支持css變量 */
    @supports ( (--base: 0)) {
      /* supported */
    }
    @supports ( not (
 
--base: 0)) {
      /* not supported */
    }
    --base: #ffc600;
    --spacing: 10px;
    --blur: 10px;
}

img {
    padding: var(--spacing);
    background: var(--base);
    filter: blur(var(--blur));
}

.hl {
    color: var(--base);
}

const inputs = document.querySelectorAll(‘.controls input‘);

 
function handleUpdate() {
    // dataset,DOM對象中的屬性對象,可以獲取data-開頭的屬性,如不兼容的地方,可以使用getAttribute等方法去獲取.
    // 此處為獲取當前的長度單位,例如px
    const suffix = this.dataset.sizing || ‘‘;
    // 改變根元素的css變量的值,結合元素樣式使用了css變量的情況，從而達到改變頁面上樣式變化的效果
    // 不同於傳統操作dom去改變樣式的方式,很巧妙
    // js操作css變量三種寫法
    // 設置變量: document.body.style.setProperty(‘--primary‘, ‘#7F583F‘);
 

    // 讀取變量: document.body.style.getPropertyValue(‘--primary‘).trim();
    // 刪除變量: document.body.style.removeProperty(‘--primary‘);
    // 這樣,可以將監聽事件的信息存入css變量,也可將對css無效的一些信息存入css變量, css變量提供了javaScript與css通信的一種途徑。
    document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}

inputs.forEach(input => input.addEventListener(‘change‘, handleUpdate));
// 不清楚為什麽要監聽mousemove事件,我去掉了發現效果沒有變化.
// inputs.forEach(input => input.addEventListener(‘mousemove‘, handleUpdate));

備註：我網上搜了下css變量17年已經出現，可惜我到現在才在這個案例中知道，之前都未曾用過，感覺這個還是很不錯的，有很多地方其實可以嘗試使用的，兼容性也比較好，ie8以上就支持了。

JavaScipt30(第三個案例)（主要知識點：css變量）