Rumah >hujung hadapan web >tutorial css >Bolehkah saya Mengubah Suai Peraturan Kelas CSS Secara Dinamik dengan jQuery?

Bolehkah saya Mengubah Suai Peraturan Kelas CSS Secara Dinamik dengan jQuery?

DDD
DDDasal
2024-11-02 13:20:031012semak imbas

Can I Modify CSS Class Rules Dynamically with jQuery?

Cara Menukar Peraturan Kelas CSS Secara Dinamik dengan jQuery

Soalan:

  • Bagaimana saya boleh mengubah suai CSS tertentu peraturan untuk kelas menggunakan jQuery, tanpa menambah gaya sebaris?
  • Adakah mungkin untuk menyimpan perubahan ini berterusan dalam fail?

Jawapan:

Walaupun jQuery tidak menyediakan kaedah secara langsung untuk mengubah suai peraturan CSS, terdapat dua pendekatan untuk menyelesaikan tugas anda:

a. Mengubah suai Peraturan CSS dengan cepat:

  • Menggunakan sifat document.styleSheets JavaScript, anda boleh mengakses peraturan lembaran gaya.
  • Lelaran melalui peraturan dan cari peraturan yang dikaitkan dengan anda kelas sasaran.
  • Gunakan peraturan[j].sifat gaya untuk menukar sifat CSS yang diingini, seperti "saiz fon".
  • Contoh:
<code class="javascript">var ss = document.styleSheets;

for (var i = 0; i < ss.length; i++) {
    var rules = ss[i].cssRules || ss[i].rules;

    for (var j = 0; j < rules.length; j++) {
        if (rules[j].selectorText === ".classname") {
            rules[j].style.fontSize = "16px";
        }
    }
}</code>

b. Menyimpan Perubahan Gaya pada Fail:

  • Proses ini memerlukan pelaksanaan bahagian pelayan.
  • Baca pengisytiharan CSS yang diubah suai menggunakan sifat document.styleSheets seperti yang dijelaskan di atas.
  • Gunakan JavaScript untuk membina rentetan yang mengandungi CSS yang dikemas kini.
  • Hantar permintaan POST Ajax ke pelayan dengan rentetan CSS sebagai muatan.
  • Di bahagian pelayan, simpan CSS diubah suai kepada fail untuk storan kekal.

Rujukan:

  • [document.styleSheets (Mozilla)](https://developer. mozilla.org/en-US/docs/Web/API/Document/styleSheets)
  • [CssRule object (Mozilla)](https://developer.mozilla.org/en-US/docs/Web/ API/CSSRule)
  • [document.styleSheets (MSDN)](https://docs.microsoft.com/en-us/previous-versions/ie8/cc330629(v=vs.85))
  • [CssRule object (MSDN)](https://docs.microsoft.com/en-us/previous-versions/ie8/cc330627(v=vs.85))

Atas ialah kandungan terperinci Bolehkah saya Mengubah Suai Peraturan Kelas CSS Secara Dinamik dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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