Bagaimanakah Saya Boleh Mengakses Gaya Kelas CSS Dengan Cekap Menggunakan JavaScript?

Mengakses Gaya Kelas CSS dengan JavaScript/jQuery

Untuk memanipulasi penampilan visual objek berdasarkan kelas CSS, pembangun boleh menggunakan JavaScript atau perpustakaan jQuery. Pertimbangkan kelas CSS bernama ".highlight" yang menetapkan warna teks kepada merah.

Satu pendekatan biasa ialah mencipta elemen halimunan dengan kelas serlahan dan mendapatkan semula warnanya untuk animasi. Walau bagaimanapun, ini bukan penyelesaian yang ideal. Kaedah yang lebih cekap digariskan di bawah:

Penyelesaian

Fungsi JavaScript telah dibangunkan untuk melintasi lembaran gaya dan mengekstrak nilai gaya yang diingini untuk pemilih tertentu. Berikut ialah pelaksanaannya:

function getStyleRuleValue(style, selector, sheet) {
    var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
    for (var i = 0, l = sheets.length; i < l; i++) {
        var sheet = sheets[i];
        if (!sheet.cssRules) continue;
        for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
            var rule = sheet.cssRules[j];
            if (
                rule.selectorText &&
                rule.selectorText.split(',').indexOf(selector) !== -1
            ) {
                return rule.style[style];
            }
        }
    }
    return null;
}

Penggunaan

Contoh penggunaan fungsi getStyleRuleValue:

var color = getStyleRuleValue('color', '.foo'); // searches all sheets for the first .foo rule and returns the set color style.

var color = getStyleRuleValue('color', '.foo', document.styleSheets[2]);

Kaedah ini membolehkan pembangun mendapatkan semula gaya kelas CSS secara dinamik untuk digunakan dalam JavaScript animasi atau fungsi dinamik lain tanpa bergantung pada penciptaan unsur halimunan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengakses Gaya Kelas CSS Dengan Cekap Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!