Bolehkah Pemilih CSS Menyasarkan Nilai Input?

Menyasarkan Nilai Input dengan Pemilih CSS

Pertanyaan: Bolehkah pemilih CSS digunakan untuk menyasarkan input berdasarkan nilai khusus mereka? Sebagai contoh, bagaimanakah input dengan nilai "Amerika Syarikat" boleh diasingkan?

Jawapan:

Pendekatan CSS Konvensional:

Ya, boleh. Pemilih atribut CSS mendayakan input penyasaran berdasarkan nilainya. Peraturan berikut menyasarkan input dengan nilai "Amerika Syarikat":

<code class="css">input[value="United States"] { color: #F90; }</code>

Cabaran dengan Nilai Dinamik:

Pendekatan di atas menyasarkan nilai atribut nod HTML. Walau bagaimanapun, jika nilai berubah secara dinamik, peraturan CSS tidak akan digunakan.

Intervensi JavaScript:

Untuk menyasarkan nilai input secara dinamik, JavaScript boleh digunakan sebagai penyelesaian . Satu kaedah ditunjukkan dalam jsFiddle ini:

<code class="html"><input type="text" id="country" value="United States"></code>

<code class="javascript">var countryInput = document.getElementById('country');
if (countryInput.value === 'United States') {
  countryInput.style.color = '#F90';
}</code>

Skrip ini menyemak nilai input dan menggunakan gaya jika ia sepadan dengan nilai yang dikehendaki.

Sebagai kesimpulan :

Pemilih CSS menyediakan cara yang mudah untuk menyasarkan nilai input. Untuk nilai statik, pemilih atribut sudah memadai. Walau bagaimanapun, untuk nilai dinamik, penyelesaian JavaScript menjadi perlu untuk memastikan peraturan CSS digunakan dengan betul.

Atas ialah kandungan terperinci Bolehkah Pemilih CSS Menyasarkan Nilai Input?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!