Bagaimanakah Saya Boleh Mengakses Atribut Gaya Kelas CSS Menggunakan JavaScript atau jQuery?

Akses Atribut Gaya Kelas CSS menggunakan JavaScript/jQuery

Apabila berurusan dengan animasi CSS, ia boleh menjadi mencabar untuk mengakses atribut gaya elemen daripada kelas CSS menggunakan JavaScript atau jQuery. Walau bagaimanapun, terdapat cara yang cekap untuk mendapatkan semula atribut ini.

Mendapatkan Atribut Gaya Menggunakan Fungsi Tersuai

Satu pendekatan ialah mencipta fungsi JavaScript tersuai yang merentasi helaian gaya dokumen mencari pemilih dan gaya CSS yang sepadan. Berikut ialah contoh fungsi:

function getStyleRuleValue(style, selector, sheet) {
  var sheets = sheet ? [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;
}

Sebagai contoh, untuk mendapatkan atribut warna kelas .highlight:

var color = getStyleRuleValue('color', '.highlight');

Nota: Fungsi ini menganggap bahawa helaian gaya ditakrifkan sebaris atau mempunyai domain yang sama dengan dokumen semasa.

Memohon Animasi

Dengan atribut gaya yang diambil, anda boleh menggunakannya pada animasi anda:

$(this).animate({
    color: color // Retrieved color attribute
}, 750);

Dengan mengemas kini kelas CSS daripada merah kepada biru, animasi akan melaraskan dengan sewajarnya, menjajarkan dengan gaya warna CSS yang dikemas kini.

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