Bagaimanakah saya boleh memuatkan dan menyusun lembaran gaya KURANG secara dinamik selepas memuatkan halaman menggunakan less.js?

Muat less.js Peraturan Secara Dinamik

Gaya pemuatan secara dinamik selepas pemuatan halaman memberikan cabaran apabila menggunakan less.js, kerana ia memerlukan semua lembaran gaya KURANG untuk dimuatkan sebelum skrip less.js.

Untuk menyelesaikan isu ini, versi 1.0.31 less.js memperkenalkan kaedah less.refreshStyles(). Kaedah ini membolehkan anda menyusun semula tag dengan jenis="teks/kurang" secara dinamik. Begini cara untuk menggunakannya:

<code class="html"><script>
  less.sheets.push(document.getElementById('abc123'));
  less.refreshStyles();
</script></code>

Kod ini mendapatkan semula lembaran gaya dengan ID 'abc123' dan menyusunnya secara dinamik. Anda boleh menambahkan kod ini pada halaman anda selepas skrip less.js dimuatkan untuk memuatkan lembaran gaya KURANG secara dinamik.

Contoh

Pertimbangkan kod ujian berikut:

<code class="html"><!-- Style sheet after less.js script -->
<script src="/static/js/less-1.0.31.min.js"></script> 
<link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/></code>

<code class="javascript">console.log("refreshing styles...");
less.sheets.push(document.getElementById('abc123'));
less.refreshStyles(true);
console.log("refreshed...");</code>

Dalam contoh ini, lembaran gaya dimuatkan selepas skrip less.js. Kaedah less.sheets.push() menambah lembaran gaya pada tatasusunan lembaran gaya yang diuruskan oleh less.js. Kemudian, less.refreshStyles() dipanggil untuk menyusun semula lembaran gaya secara dinamik.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memuatkan dan menyusun lembaran gaya KURANG secara dinamik selepas memuatkan halaman menggunakan less.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!