Bagaimanakah saya boleh mendapatkan semua atribut gaya dan nilainya digunakan pada elemen HTML dengan IDnya menggunakan JavaScript?

Dapatkan Atribut Gaya Elemen mengikut ID dalam JavaScript

Pengenalan

Perlu mendapatkan semula semua atribut gaya dan ciri-cirinya nilai yang digunakan pada elemen HTML hanya menggunakan IDnya? Soalan ini membincangkan cara untuk melakukan perkara itu dengan tepat.

Memahami Masalah

Objektifnya adalah untuk mencipta fungsi, getStyleById, yang mengambil ID elemen dan mengembalikan senarai semua atribut gaya dan nilai sepadannya. Fungsi ini harus mengambil kira atribut sebaris dan gaya yang ditakrifkan dalam fail CSS luaran.

Membuat Penyelesaian

Untuk mencapai ini, pertimbangkan kaedah berikut:

• Gelung melalui objek CSSStyleDeclaration (getComputedStyle): Lelaran ke atas indeks objek CSSStyleDeclaration, menggunakan getPropertyValue untuk mendapatkan nilai bagi setiap nama sifat.
• Gunakan untuk dalam gelung untuk currentStyle (IE eksklusif): Guna biasa untuk dalam gelung untuk objek currentStyle, yang wujud hanya dalam Internet Explorer.
• Gelung gaya sebaris dengan cara yang sama: Gunakan yang sama pendekatan gelung untuk mendapatkan semula atribut gaya sebaris.

Pelaksanaan Kod

<code class="javascript">function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}

function getAllStyles(elem) {
    if (!elem) return []; // Element does not exist, empty list.
    var win = document.defaultView || window, style, styleNode = [];
    if (win.getComputedStyle) { /* Modern browsers */
        style = win.getComputedStyle(elem, '');
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
            //               ^name ^           ^ value ^
        }
    } else if (elem.currentStyle) { /* IE */
        style = elem.currentStyle;
        for (var name in style) {
            styleNode.push( name + ':' + style[name] );
        }
    } else { /* Ancient browser..*/
        style = elem.style;
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }
    return styleNode;
}</code>

Penggunaan

Untuk menggunakan ini fungsi, hanya panggil getStyleById dengan ID elemen. Contohnya:

<code class="javascript">console.log(getStyleById('my-element'));</code>

Ini akan mencetak tatasusunan yang mengandungi semua atribut gaya dan nilainya digunakan pada elemen dengan ID 'elemen saya'.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mendapatkan semua atribut gaya dan nilainya digunakan pada elemen HTML dengan IDnya menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!