Bagaimanakah JavaScript Menghuraikan CSS Menggunakan CSSOM dengan Cekap?

Menghuraikan CSS dalam JavaScript / jQuery

Dalam artikel ini, kami akan menyelidiki masalah menghuraikan CSS dalam JavaScript, khususnya memfokuskan pada tugas mengubah kod CSS menjadi perwakilan berasaskan objek. Kami akan meneroka batasan pelaksanaan DIY dan memperkenalkan penyelesaian yang berpotensi menggunakan CSSOM.

Pelaksanaan DIY dan Cabarannya

Coretan kod yang disediakan cuba menghuraikan CSS secara manual , peraturan pemisahan pada titik bertitik dan pendakap. Walau bagaimanapun, pendekatan ini gagal apabila menemui sifat CSS dengan koma bernoktah terbenam, seperti URL latar belakang.

Pendekatan Alternatif: Menggunakan CSSOM

Untuk mengatasi cabaran ini, kita boleh memanfaatkan Model Objek CSS terbina dalam penyemak imbas (CSSOM). CSSOM membolehkan kami mengakses dan memanipulasi peraturan CSS secara dinamik. Kami boleh menggunakan keupayaan ini untuk tujuan penghuraian.

Pelaksanaan menggunakan CSSOM

Kod JavaScript berikut menunjukkan cara menggunakan CSSOM untuk menghuraikan CSS:

var rulesForCssText = function (styleContent) {
    var doc = document.implementation.createHTMLDocument(""),
        styleElement = document.createElement("style");

   styleElement.textContent = styleContent;
    // the style will only be parsed once it is added to a document
    doc.body.appendChild(styleElement);

    return styleElement.sheet.cssRules;
};

Untuk setiap peraturan yang dikembalikan oleh rulesForCssText, kita boleh memeriksa sifatnya menggunakan rule.style.

Contoh Penggunaan

Untuk menggambarkan penggunaan pendekatan ini, pertimbangkan JavaScript Fiddle berikut (https://jsfiddle.net/v2JsZ/):

var css = "a { color: red; }";
var rules = rulesForCssText(css);

console.log(rules[0].selectorText); // "a"
console.log(rules[0].style.color); // "red"

Kesimpulan

Sementara penghuraian manual CSS dalam JavaScript adalah mungkin, ia memperkenalkan kemungkinan perangkap. Dengan memanfaatkan CSSOM, kami boleh memanfaatkan keupayaan penyemak imbas untuk penghuraian CSS yang boleh dipercayai dan cekap.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Menghuraikan CSS Menggunakan CSSOM dengan Cekap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!