Bagaimanakah Saya Boleh Mendapatkan Atribut Gaya CSS dengan Cekap daripada Kelas Menggunakan JavaScript?

Mendapatkan Atribut Gaya daripada Kelas CSS Menggunakan JavaScript/jQuery

Apabila bekerja dengan animasi gaya dalam JavaScript, ia mungkin diperlukan untuk mengakses sifat yang ditentukan dalam kelas CSS. Cabaran timbul apabila perlu mengemas kini animasi secara dinamik berdasarkan perubahan CSS, memastikan ia kekal konsisten.

Satu pendekatan melibatkan penggunaan elemen tersembunyi yang diberikan kepada kelas CSS sasaran, mengekstrak warna yang dikira dan kemudian menggunakannya dalam animasi tersebut. Walau bagaimanapun, kaedah ini secara amnya dianggap tidak cekap.

Penyelesaian yang lebih mantap ialah melintasi helaian gaya yang dikaitkan dengan dokumen dan mencari sifat pemilih dan gaya khusus yang dipersoalkan. Berikut ialah pelaksanaan fungsi yang melaksanakan tugas ini:

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;
}

Contoh penggunaan:

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]); // searches a specific stylesheet

Fungsi ini bergantung pada keupayaan untuk memisahkan senarai pemilih yang dipisahkan koma dan semak sama ada pemilih yang diberikan adalah sebahagian daripada senarai. Ia menyokong kedua-dua peraturan berkumpulan dan helaian gaya luaran daripada domain yang sama.

Dengan menggunakan fungsi ini, anda boleh melaraskan animasi gaya secara dinamik berdasarkan perubahan sifat kelas CSS, memastikan tapak web atau aplikasi anda kekal konsisten dari segi estetika dan responsif kepada pengguna pilihan.

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