Bagaimana untuk Mengakses Nilai CSS untuk Elemen Dijana Secara Dinamik dalam JavaScript/jQuery?

Mengakses Nilai CSS daripada Helaian Gaya Luaran dengan JavaScript/jQuery

Pengenalan
Banyak aplikasi web bergantung pada elemen yang dijana secara dinamik yang bukan hadir pada pemuatan halaman awal. Walau bagaimanapun, menggayakan elemen ini menggunakan CSS luaran boleh menimbulkan cabaran. Artikel ini mengkaji cara untuk mendapatkan semula nilai CSS untuk elemen tersebut, khususnya apabila menggunakan JavaScript atau jQuery.

Menggunakan Kaedah CSS jQuery
Kaedah jQuery $('elemen').css( 'property') digunakan secara meluas untuk mendapatkan semula nilai CSS. Walau bagaimanapun, ia memerlukan elemen untuk dipaparkan pada halaman. Untuk elemen yang dijana secara dinamik, pendekatan ini mungkin tidak boleh dilaksanakan.

Pendekatan Alternatif: Elemen Tersembunyi
Untuk mengatasi had ini, satu pendekatan adalah dengan menambahkan salinan tersembunyi elemen pada muka surat. Ini membolehkan kami mengakses atribut gayanya dan menentukan nilai CSS walaupun sebelum elemen sebenar dijana.

Pelaksanaan JavaScript
Menggunakan JavaScript, kita boleh mencapainya seperti berikut:

(function() {
    // Create a hidden paragraph element
    var $p = $("<p>").hide().appendTo("body");

    // Get the CSS value of "color"
    console.log($p.css("color"));

    // Remove the hidden element
    $p.remove();
})();

Output:
Dengan mengandaikan peraturan CSS p {color: blue} wujud, outputnya ialah:

"blue"

Kaedah ini berfungsi kerana elemen tersembunyi berkongsi sifat CSS yang sama seperti elemen yang dijana secara dinamik, membolehkan kami mendapatkan semula nilai tanpa elemen itu hadir pada halaman .

Atas ialah kandungan terperinci Bagaimana untuk Mengakses Nilai CSS untuk Elemen Dijana Secara Dinamik dalam JavaScript/jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!