Bagaimanakah Saya Boleh Mengubah Suai dan Mengalih Keluar Definisi Kelas CSS secara Dinamik dalam JavaScript?

Mengubah suai dan Mengalih Keluar Definisi Kelas CSS Secara Dinamik

Memanipulasi takrifan kelas CSS pada masa jalan membolehkan kawalan dinamik ke atas penampilan visual elemen web. Ini boleh berguna untuk menyesuaikan pengalaman pengguna berdasarkan syarat tertentu atau pilihan pengguna.

Mengubah suai Definisi Kelas CSS

Untuk mengubah suai definisi kelas CSS sedia ada, anda boleh menggunakan sifat document.styleSheets untuk akses peraturan lembaran gaya. Setiap peraturan kemudiannya boleh dikemas kini menggunakan sifat rule.style.

Sebagai contoh, untuk menukar saiz fon kelas .menu kepada 10px:

// Get the stylesheet
const stylesheet = document.styleSheets[0];

// Find the .menu rule
const rule = Array.from(stylesheet.cssRules).find(r => r.selectorText === '.menu');

// Change the font size
rule.style.setProperty('font-size', '10px', null);

Mengalih keluar Definisi Kelas CSS

Untuk mengalih keluar definisi kelas CSS, anda boleh menggunakan kaedah deleteRule document.styleSheets objek.

Contohnya, untuk mengalih keluar definisi kelas .menu:

stylesheet.deleteRule(stylesheet.cssRules.length - 1); // Assuming .menu is the last rule

Sebagai alternatif, anda boleh menetapkan sifat paparan peraturan kepada tiada untuk menyembunyikan elemen yang menggunakan kelas itu dengan berkesan.

rule.style.setProperty('display', 'none', null);

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Suai dan Mengalih Keluar Definisi Kelas CSS secara Dinamik dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!