Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Pilihan Terpilih dalam Elemen `` Menggunakan CSS dan JavaScript?

Menyesuaikan Warna Latar Belakang Pilihan Terpilih dalam dengan CSS

Sementara CSS menyediakan pilihan penggayaan yang mencukupi untuk elemen, ia tidak mempunyai atribut gaya khusus untuk mengubah warna latar belakang pilihan yang sedang dipilih. Walau bagaimanapun, gabungan CSS tulen dan JavaScript boleh menangani had ini dengan berkesan.

Dalam contoh kod HTML yang disediakan, bahagian elemen menetapkan warna latar belakang untuk senarai lungsur menggunakan "warna latar belakang: merah;". Walau bagaimanapun, apabila memilih pilihan, ia menganggap warna biru lalai. Untuk mengatasi perkara ini dan menyesuaikan warna latar belakang untuk pilihan yang dipilih, teknik CSS tradisional gagal.

Di sinilah langkah JavaScript:

var sel = document.getElementById('select_id');
sel.addEventListener('click', function(el){
    var options = this.children;
    for(var i=0; i < this.childElementCount; i++){
        options[i].style.color = 'white';
    }
    var selected = this.children[this.selectedIndex];
    selected.style.color = 'red';
}, false);

Dalam skrip ini:

• Kami mendapatkan semula elemen mengikut IDnya.
• Apabila pengguna mengklik butang elemen, ia melingkari semua elemen kanak-kanak (pilihan) untuk menetapkan warnanya kepada putih.
• Ia kemudiannya memperoleh pilihan yang dipilih dan menetapkan warnanya kepada merah, menyerlahkannya daripada yang lain.

Walaupun penyelesaian JavaScript ini membenarkan untuk menyesuaikan warna latar belakang pilihan yang dipilih, adalah penting untuk ambil perhatian bahawa ia tidak mengubah gaya CSS elemen secara langsung. Ia memanipulasi penampilan dinamik elemen melalui JavaScript. Pendekatan ini mungkin merupakan penyelesaian yang berdaya maju apabila keperluan adalah untuk menyesuaikan warna latar belakang pilihan yang dipilih semata-mata dan tidak melibatkan penyesuaian CSS selanjutnya bagi

elemen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Latar Belakang Pilihan Terpilih dalam Elemen `` Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!