使用HTML5 資料屬性自訂CSS 值

在Web 開發領域，利用HTML5 資料屬性修改CSS 值的可能性已成為可能激發了好奇心。此技術模仿了透過內容屬性更改 CSS 內容的方式。

探討HTML5 資料屬性方法

考慮以下HTML 與CSS 片段：

div { width: attr(data-width); }

當前實作限制

在撰寫本文時，此方法未如預期運作。瀏覽器將 data-width 屬性解釋為字串，而不是寬度的數值。

即將推出的功能：自訂屬性

但是，CSS Values 規格預計這個功能。 attr() 表示法允許 CSS 存取指定資料屬性的值。

div { width: attr(data-width); }

實作狀態

不幸的是，此功能仍在開發中，主要瀏覽器尚未完全支援。

Pseudo- 的替代方案Elements

雖然還無法直接設定CSS 值，但您可以利用偽元素來操作內容：

::after {
  content: attr(data-width);
}
此技術可讓您將 data-width 屬性的值顯示為偽元素的內容。