Bagaimanakah Saya Boleh Dapatkan Secara Dinamik Gaya Kelas CSS Menggunakan JavaScript atau jQuery?

Cara Mengambil Gaya Kelas CSS Secara Dinamik Menggunakan JavaScript/jQuery

Dalam pembangunan web, penggayaan sering ditakrifkan menggunakan kelas CSS. Untuk mengubah suai gaya elemen berdasarkan kelas CSS, anda boleh memanfaatkan JavaScript atau jQuery.

Mendapatkan semula Gaya dengan jQuery

jQuery menyediakan kaedah yang mudah untuk mengakses atribut gaya daripada Kelas CSS:

$(element).css(styleAttribute);

Sebagai contoh, untuk mendapatkan warna elemen dengan kelas "highlight":

var color = $(element).css("color");

Kaedah Ganti Menggunakan Fungsi

Pendekatan lain ialah menggunakan fungsi yang merentasi lembaran gaya dalam dokumen:

function getStyleRuleValue(style, selector) {
  // Iterate through style sheets
  for (var i = 0; i < document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];

    // Iterate through rules in the current sheet
    for (var j = 0; j < sheet.cssRules.length; j++) {
      var rule = sheet.cssRules[j];

      // Check if the rule matches the selector
      if (rule.selectorText.includes(selector)) {
        // Return the requested style
        return rule.style[style];
      }
    }
  }

  // No matching rule found
  return null;
}

Penggunaan:

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

Fungsi ini boleh mendapatkan semula gaya daripada sebaris dan helaian gaya luaran, tetapi ia terhad kepada helaian luaran domain yang sama.

Contoh Penggunaan

Pertimbangkan kelas CSS berikut:

.highlight { 
    color: red; 
}

Untuk menganimasikan warna objek untuk dipadankan dengan kelas "highlight":

$(this).animate({
    color: getStyleRuleValue("color", ".highlight")
}, 750);

Pendekatan ini membolehkan anda menukar warna CSS secara dinamik dan minta animasi bertindak balas terhadap perubahan tersebut, memberikan pengalaman pengguna yang lancar dan konsisten.

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