HTML5 資料屬性可以修改 CSS 值嗎？

使用HTML5 資料屬性自訂CSS 值

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

探索HTML5 資料屬性方法

考慮以下HTML 與CSS 片段：

<code class="html"><div data-width="600px"></div></code>

<code class="css">div { width: attr(data-width); }</code>

目前限制🎜> >

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

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

<code class="html"><div data-width="600px"></div></code>

<code class="css">div { width: attr(data-width); }</code>

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

實作狀態

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

偽元素的替代方案

<code class="html"><div>::after {
  content: attr(data-width);
}</code>

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

此技術可讓您將data-width 屬性的值顯示為偽元素的內容。

以上是HTML5 資料屬性可以修改 CSS 值嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！