Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Mengeluarkan Nilai Peraturan CSS dan Mengembalikannya sebagai Gaya Sebaris?

Bagaimanakah Saya Boleh Mengeluarkan Nilai Peraturan CSS dan Mengembalikannya sebagai Gaya Sebaris?

Linda Hamilton
Lepaskan: 2024-12-11 01:01:09
asal
125 orang telah melayarinya

How Can I Extract CSS Rule Values and Return Them as Inline Styles?

Mengekstrak Nilai Peraturan CSS

Untuk mengekstrak nilai peraturan CSS dan mengembalikannya dalam format gaya sebaris, pendekatan universal diperlukan. Ini melibatkan merentasi semua peraturan CSS dan mengenal pasti peraturan sasaran berdasarkan pemilihnya.

Pertimbangkan CSS berikut:

.test {
    width: 80px,
    height: 50px,
    background-color: #808080;
}
Salin selepas log masuk

Coretan kod di bawah menunjukkan cara mengekstrak nilai untuk ". test" rule:

function getStyle(className) {
    var cssText = "";
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {        
        if (classes[x].selectorText == className) {
            cssText += classes[x].cssText || classes[x].style.cssText;
        }         
    }
    return cssText;
}

var rules = getStyle('.test');
Salin selepas log masuk

CssText pembolehubah kini akan mengandungi rentetan dengan nilai CSS untuk Peraturan ".test", seolah-olah ia diisytiharkan dalam gaya sebaris. Pendekatan ini serba boleh dan boleh digunakan untuk mana-mana peraturan CSS, tanpa mengira kandungannya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengeluarkan Nilai Peraturan CSS dan Mengembalikannya sebagai Gaya Sebaris?. 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