Bagaimana untuk Memuatkan Peraturan KURANG Secara Dinamik Selepas Pemuatan Halaman?

Memuatkan KURANG Peraturan Secara Dinamik

Batasan Sedia Ada

Kurang Lembaran gaya, pada mulanya, mesti dimuatkan sebelum skrip less.js. Ini kerana skrip menghuraikan dan mentafsir gaya KURANG sebelum pemaparan. Membalikkan susunan ini tidak akan menghasilkan tafsiran gaya.

Penyelesaian Pemuatan Dinamik

Versi 1.0.31 less.js memperkenalkan kaedah less.refreshStyles(). Kaedah ini menyusun semula teg dengan atribut type="text/less".

Contoh Penggunaan

Untuk memuatkan peraturan KURANG secara dinamik selepas memuatkan halaman, ikut langkah berikut:

1. Sertakan skrip less.js.
2. Pastikan bahawa helaian gaya KURANG yang anda ingin muatkan secara dinamik ditakrifkan dalam teg dengan atribut type="text/less".
3. Panggil kaedah less.refreshStyles() untuk menyusun peraturan LESS.

Kes Ujian Kemas Kini

Contoh kod dikemas kini berikut menunjukkan proses pemuatan dinamik:

<code class="html"><script src="http://lesscss.googlecode.com/files/less-1.0.31.min.js"></script> 
<link rel="stylesheet/less" href="/static/less/dynamic.less" id="abc123"/>

<script>
console.log("refreshing styles...");
less.refreshStyles();
console.log("refreshed...");
</script></code>

LESS Stylesheet

<code class="less">@primary_color: green;

#container {
  background: @primary_color;
  border-radius: 5px;

  div {
    color: red;
  }
}</code>

Dengan memanggil less.refreshStyles( ) kaedah, peraturan KURANG yang ditakrifkan dalam teg dengan ID "abc123" akan disusun secara dinamik dan digunakan pada halaman.

Atas ialah kandungan terperinci Bagaimana untuk Memuatkan Peraturan KURANG Secara Dinamik Selepas Pemuatan Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!