怎麼在html元素裡自定變數

 

在 HTML 元素裡自定義變數，通常有兩種常見方式：

---

✅ 方法一：使用 HTML data-* 屬性（最常用）

HTML 本身不能直接放「變數」，但可以用 data- 屬性存放自定義資料。

▶ 寫法：

<div id="box" data-color="red" data-size="20"></div>

▶ 在 JavaScript 中取得：

const box = document.getElementById("box");
console.log(box.dataset.color); // red
console.log(box.dataset.size);  // 20

▶ 在 JavaScript 中修改：

box.dataset.color = "blue";

---

✅ 方法二：使用 CSS 變數（Custom Properties）

如果你指的是在 HTML 元素上定義「CSS 變數」，可以直接寫在 style 中：

▶ 寫法：

<div id="card" style="--main-color: #4CAF50; --padding: 10px;">
  Card content
</div>

▶ 在 CSS 使用：

#card {
  background-color: var(--main-color);
  padding: var(--padding);
}

▶ 在 JavaScript 讀取與修改：

const card = document.getElementById("card");

// 讀取
const color = getComputedStyle(card).getPropertyValue('--main-color');
console.log(color);

// 修改
card.style.setProperty('--main-color', 'blue');


在 jQuery 中引用 HTML 裡的自定義變數，依你使用的是 data-* 還是 CSS 變數，方式會不一樣。下面分兩種情況示範：

✅ 1. jQuery 引用 data-* 自定義屬性（最常用）
▶ HTML
<div id="box" data-color="red" data-size="20"></div>

▶ jQuery 讀取
let color = $('#box').data('color');
let size  = $('#box').data('size');

console.log(color); // red
console.log(size);  // 20

▶ jQuery 設定
$('#box').data('color', 'blue');
$('#box').attr('data-color', 'blue');  // 若要確保 DOM 屬性也同步更新


✅ 2. jQuery 讀取 / 設定 CSS 變數（自定義 CSS variable）
▶ HTML
<div id="card" style="--main-color: #4CAF50; --padding: 10px;">
  Content
</div>

▶ jQuery 讀取 CSS 變數
let color = $('#card').css('--main-color');
console.log(color);   // "#4CAF50"

▶ jQuery 修改 CSS 變數
$('#card').css('--main-color', 'blue');
$('#card').css('--padding', '20px');


📌 補充：data() vs attr()
方式
說明
$(el).data('key')
讀取 jQuery 快取的值（不一定即時反應 DOM）
$(el).attr('data-key')
讀取真正的 HTML 屬性字串
若你有動態修改 data-* 屬性，建議用 attr() 確保同步：
$('#box').attr('data-color', 'green');