Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mengekstrak Semua Gaya Gunaan untuk Elemen Menggunakan IDnya dalam JavaScript?

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

Susan Sarandon
Lepaskan: 2024-10-29 05:11:03
asal
638 orang telah melayarinya

How to Extract All Applied Styles for an Element Using Its ID in 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;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan