我們有時候在開發的時候會有一個需求是，想要即時的對綁定在某個 DOM 上的 CSS 屬性的值去做更改，這時候你會怎麼做呢？

舉個例子來說好了，當今天你 Vue 的開發中，希望某個 DOM 跟隨你的滑鼠座標去移動，用 JS 的寫法就是，針對 window 去監聽 mousemove 事件，然後取得 x 跟 y 的座標後，去更新 top 以及 left 的值來達到跟隨的效果，這是最典型的做法...

我們來看看實際上 Vue 的組件的 code 

你會看到我實際上用了兩個變數去記錄，然後透過行內樣式( Inline Style )的方式去改變 top 跟 left 的座標，看起來好像沒啥問題，但以我個人來說我覺得 div 行內樣式的寫法太阿雜，因為你有可能還會做其他事情，又或是寫 Tailwind CSS 你的 class 變超長，這時候你整個 div 就會看起來很亂......

那還有更好的做法嗎？

接下來要介紹更好的做法！

我們將在 Vue 裡面使用 CSS 變數的方式來達成！直接來看 Code 

你會看到我採用了 css 變數來定義 top 跟 left 的座標，再透過 setProperty 去改變 css 變數，這麼一來我們就可以做到像 Inline Style 的那樣的效果，這樣的使用方式不只可以讓我們的 div 保持乾淨，更可以減少日後維護出錯的機率，我們只需要專注在資料的處理上面，不用去動 DOM 上任何關於樣式的部分了。

 

以下是完成的範例，有興趣的朋友可以玩玩看

https://codesandbox.io/p/sandbox/yc58rf

 

延伸閱讀

什麼是 .setProperty()

.setProperty() 是 CSS 樣式物件（CSSStyleDeclaration）的一個方法，用於設定 CSS 屬性。

element.style.setProperty(propertyName, value, priority)

• propertyName：CSS 屬性名稱
• value：屬性值
• priority（非必填）：優先級，通常是 "important"

傳統我們只能使用 style 內部的屬性來更改值

element.style.width = '100px';
element.style.backgroundColor = 'red';

但現在可以透過 .setProperty 這個函式來修改

element.style.setProperty('width', '100px');
element.style.setProperty('background-color', 'red');

那你說這個好處是什麼呢？

1. CSS 變數的支援

// 這樣無法設定 CSS 變數
element.style.--box-x = '100px'; // 語法錯誤

// 使用 setProperty 可以設定 CSS 變數
element.style.setProperty('--box-x', '100px');

2. 不需要駝峰命名的方式來使用

// 需要用駝峰命名的方式使用
element.style.backgroundColor = 'red';
element.style.borderRadius = '10px';

// 可以直接使用 CSS 原本的名稱
element.style.setProperty('background-color', 'red');
element.style.setProperty('border-radius', '10px');

3. 更好支援動態屬性的處理

const properties = ['--box-x', '--box-y', '--box-color'];
const values = ['100px', '200px', 'red'];

properties.forEach((prop, index) => {
  element.style.setProperty(prop, values[index]);
});

setProperty 總結

1. 彈性高：可以設定任何 CSS 屬性，包括自定義變數
2. 一致性：不需要記住駝峰式轉換規則
3. 動態性：屬性名稱也可以是變數

CSS 變數是唯一能在 JavaScript 中設定變數的方式，這就是為什麼在你的程式碼中使用 .setProperty() 來操作 CSS 變數的原因！