Bagaimanakah saya boleh menukar peraturan kelas CSS secara dinamik menggunakan jQuery tanpa menyentuh DOM?

Mengubah suai Peraturan Kelas CSS Secara Dinamik dengan jQuery

Soalan 1: Menukar Peraturan Kelas dengan Cepat

Untuk menukar saiz fon kelas CSS bernama ".classname" menggunakan jQuery, tanpa menambah CSS sebaris atau memanipulasi DOM secara langsung, ikut langkah berikut:

<code class="javascript">// Get the CSS stylesheet
var styleSheet = document.styleSheets[0];

// Loop through the CSS rules within the stylesheet
for (var i = 0; i < styleSheet.cssRules.length; i++) {
    // Check if the current rule is for the ".classname" class
    if (styleSheet.cssRules[i].selectorText === ".classname") {
        // Set the new font size for the rule
        styleSheet.cssRules[i].style.fontSize = "16px";
    }
}</code>

Soalan 2: Menyimpan Perubahan Kelas pada Fail

Untuk menyimpan CSS yang diubah suai peraturan kelas kepada fail, anda perlu membuat permintaan Ajax POST ke pelayan.

<code class="javascript">// Build a string containing the updated CSS declarations
var updatedCSS = "";
for (var i = 0; i < styleSheet.cssRules.length; i++) {
    updatedCSS += styleSheet.cssRules[i].selectorText + " {\n";
    for (var j = 0; j < styleSheet.cssRules[i].style.length; j++) {
        updatedCSS += "    " + styleSheet.cssRules[i].style[j] + ": " + styleSheet.cssRules[i].style.getPropertyValue(styleSheet.cssRules[i].style[j]) + ";\n";
    }
    updatedCSS += "}\n";
}

// Send the updated CSS to the server
$.ajax({
    type: "POST",
    url: "/save-css",
    data: { updatedCSS: updatedCSS }
});</code>

Di bahagian pelayan, cipta skrip untuk menyimpan CSS dikemas kini yang diterima ke fail.

Nota Tambahan

• Pendekatan pertama tidak menjejaskan fail CSS luaran tetapi hanya mengubah suai peraturan CSS dalam ingatan, jadi ia tidak akan berterusan selepas muat semula halaman.
• Untuk keserasian merentas pelayar, pertimbangkan untuk menggunakan pemalam jQuery yang memudahkan manipulasi peraturan CSS.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menukar peraturan kelas CSS secara dinamik menggunakan jQuery tanpa menyentuh DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!