Bagaimana untuk Mendapatkan Nilai Harta CSS untuk Elemen dalam JavaScript?

Membaca Sifat CSS Elemen Menggunakan JavaScript

Masalah:

Bagaimana untuk mendapatkan nilai sifat CSS untuk elemen menggunakan JavaScript, memandangkan lembaran gaya dipautkan secara luaran ke halaman web?

Penyelesaian:

Terdapat dua pendekatan utama:

1. Menggunakan document.styleSheets:

Kaedah ini melibatkan lelaran secara manual melalui tatasusunan document.styleSheets dan menghuraikan peraturan CSS untuk mencari sifat yang diingini. Walau bagaimanapun, pendekatan ini tidak disyorkan kerana ia intensif sumber dan tidak praktikal untuk kebanyakan senario.

2. Mencipta Elemen Padanan dan Menggunakan getComputedStyle:

Kaedah ini mencipta elemen dengan pemilih CSS yang sama dengan elemen sasaran dan menggunakan kaedah getComputedStyle untuk mendapatkan semula nilai sifat. Kelebihan pendekatan ini ialah ia mengambil kira semua gaya yang diwarisi dan sebarang gaya yang digunakan secara dinamik.

Contoh Kod:

Untuk mendapatkan semula sifat "warna" sesuatu div dengan kelas "reka letak", gunakan kod berikut:

<code class="javascript">function getStyleProp(elem, prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    else if(elem.currentStyle)
        return elem.currentStyle[prop]; //IE
}</code>

Penggunaan:

<code class="javascript">window.onload = function(){
    var d = document.createElement("div"); //Create div
    d.className = "layout";                //Set class = "layout"
    alert(getStyleProp(d, "color"));       //Get property value
}</code>

Nota Tambahan:

Untuk mengabaikan sebaris takrif gaya pada elemen semasa, gunakan fungsi getNonInlineStyle:

<code class="javascript">function getNonInlineStyle(elem, prop){
    var style = elem.cssText; //Cache the inline style
    elem.cssText = "";        //Remove all inline styles
    var inheritedPropValue = getStyle(elem, prop); //Get inherited value
    elem.cssText = style;     //Add the inline style back
    return inheritedPropValue;
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Nilai Harta CSS untuk Elemen dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!