Bagaimana untuk Mengubah Warna Pemegang Tempat Secara Dinamik dengan JavaScript?

Memanipulasi Warna Pemegang Tempat dengan JavaScript

Menentukan cara menukar warna ruang letak kotak teks melalui JavaScript boleh membingungkan. Walaupun pemilih ::placeholder boleh digunakan dalam CSS untuk mentakrifkan warna pemegang tempat, nampaknya tiada setara JavaScript serta-merta.

Penyelesaian: Pembolehubah CSS

Penyelesaian yang berdaya maju ialah memanfaatkan pembolehubah CSS. Begini cara anda boleh mencapai ini:

1. Takrifkan Pembolehubah CSS:

:root {
  --placeholder-color: red;
}

Ini mencipta pembolehubah CSS bernama --placeholder-color dengan nilai awal merah.

2. Gunakan Pembolehubah pada Pemegang Tempat:

::placeholder {
  color: var(--placeholder-color);
}

Dengan merujuk pembolehubah --placeholder-color di dalam peraturan ::placeholder, warna pemegang tempat kini akan mewarisi nilai yang ditakrifkan dalam elemen akar.

3. Kemas kini Pembolehubah Secara Dinamik:

document.querySelector('input[type=text]').style.setProperty("--placeholder-color", "blue");

Menggunakan JavaScript, anda boleh mengemas kini nilai pembolehubah --placeholder-color secara dinamik, yang kemudiannya akan menukar warna pemegang tempat dalam semua padanan elemen.

Contoh:

<input type="text" placeholder="placeholder">
<button onclick="update()">Change color</button>

function update() {
  document.querySelector('input[type=text]').style.setProperty("--placeholder-color", "blue");
}

Faedah:

• Mendayakan perubahan warna yang tepat untuk elemen khusus.
• Membolehkan interaktiviti dan dinamik kemas kini.
• Menyokong keserasian merentas penyemak imbas utama.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Warna Pemegang Tempat Secara Dinamik dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!