Bagaimanakah Saya Boleh Menghuraikan CSS dengan Cekap dalam JavaScript Menggunakan CSSOM?

Menghuraikan CSS dalam JavaScript / jQuery

Untuk menghuraikan CSS dalam JavaScript, anda boleh memanfaatkan antara muka CSSOM terbina dalam penyemak imbas. Ini menghapuskan keperluan untuk perpustakaan tersuai dan menyediakan cara piawai untuk mengakses data CSS.

JavaScript untuk mengambil peraturan CSS, terus daripada CSSOM:

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;
};

Setiap peraturan CSS yang dikembalikan oleh rulesForCssText boleh selanjutnya diperiksa menggunakan rule.style, yang menyediakan akses kepada sifat CSS individu.

Sebagai contoh, pertimbangkan CSS:

a {
  color: red;
}

Menggunakan rulesForCssText, anda boleh mendapatkan semula peraturan untuk gaya "a" dan mengakses sifatnya:

const rules = rulesForCssText('a { color: red; }');
const aRule = rules[0];
console.log(aRule.selectorText); // Outputs: "a"
console.log(aRule.style.color); // Outputs: "red"

Pendekatan alternatif ini menyelesaikan isu yang dihadapi dalam penghuraian tersuai anda pelaksanaan, kerana ia tidak bergantung pada pemisahan rentetan manual dan pengendalian kes khas seperti URI dalam nilai sifat.

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