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

附上項目鏈接:?https://github.com/wesbos/JavaScript30

主要要實現的是移動上面的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等方法去獲取.// 此處為獲取當前的長度單位,例如pxconst 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以上就支持了。

轉載于:https://www.cnblogs.com/wangxi01/p/10641708.html

總結

以上是生活随笔為你收集整理的JavaScipt30(第三个案例)（主要知识点：css变量）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。