Bolehkah Atribut Data HTML5 Mengubah Nilai CSS?

Menyesuaikan Nilai CSS dengan Atribut Data HTML5

Dalam bidang pembangunan web, kemungkinan menggunakan atribut data HTML5 untuk mengubah suai nilai CSS mempunyai mencetuskan rasa ingin tahu. Teknik ini meniru cara kandungan CSS boleh diubah melalui sifat kandungan.

Meneroka Pendekatan Atribut Data HTML5

Pertimbangkan coretan HTML dan CSS berikut:

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

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

Batasan Pelaksanaan Semasa

Pada masa penulisan, pendekatan ini tidak berfungsi seperti yang diharapkan. Penyemak imbas mentafsir atribut lebar data sebagai rentetan, bukannya nilai berangka untuk lebar.

Ciri Akan Datang: Sifat Tersuai

Walau bagaimanapun, spesifikasi Nilai CSS menjangkakan ciri ini. Notasi attr() membenarkan CSS mengakses nilai atribut data yang ditentukan.

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

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

Status Pelaksanaan

Malangnya, ciri ini masih di bawah pembangunan dan tidak disokong sepenuhnya oleh pelayar utama.

Alternatif untuk Elemen Pseudo

Walaupun keupayaan untuk menetapkan nilai CSS secara langsung belum tersedia, anda boleh memanfaatkan pseudo -elemen untuk memanipulasi kandungan:

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

Teknik ini membolehkan anda memaparkan nilai atribut lebar data sebagai kandungan elemen pseudo.

Atas ialah kandungan terperinci Bolehkah Atribut Data HTML5 Mengubah Nilai CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!