Bagaimana untuk Mengekstrak Semua Gaya Gunaan untuk Elemen Menggunakan IDnya dalam JavaScript?

Cara Mendapatkan Semua Gaya Gunaan untuk Elemen Menggunakan Idnya

Penerangan Masalah

Untuk mencipta fungsi yang menentukan gaya yang digunakan pada elemen mengikut IDnya, seseorang mesti mempertimbangkan kedua-dua gaya fail sebaris dan CSS. Walaupun pelaksanaan semasa menerima nama atribut gaya elemen bersama IDnya, matlamatnya adalah untuk memperoleh semua atribut gaya hanya dengan memberikan ID.

Jawapan

Kaedah:

1. Lelaran melalui CSSStyleDeclaration Object: Dapatkan nama sifat dalam objek getComputedStyle; gunakan getPropertyValue untuk mengumpulkan nilai.
2. Gunakan Standard Untuk Gelung: Guna kaedah ini untuk Gaya semasa.
3. Sertakan Teknik Gelung Yang Sama: Guna ini pendekatan untuk gaya sebaris.

Kod:

function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}
function getAllStyles(elem) {
    // Check if element exists (empty list if not)
    if (!elem) return [];

    var win = document.defaultView || window, style, styleNode = [];

    // Modern browsers
    if (win.getComputedStyle) {
        style = win.getComputedStyle(elem, '');

        // Loop through style properties and gather values
        for (var i = 0; i < style.length; i++) {
            styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
        }
    } 
    // IE
    else if (elem.currentStyle) {
        style = elem.currentStyle;

        // Loop through currentStyle properties
        for (var name in style) {
            styleNode.push( name + ':' + style[name] );
        }
    } 
    // Ancient browsers
    else {
        style = elem.style;

        // Loop through inline styles
        for (var i = 0; i < style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }

    // Return list of style properties
    return styleNode;
}

Atas ialah kandungan terperinci Bagaimana untuk Mengekstrak Semua Gaya Gunaan untuk Elemen Menggunakan IDnya dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!