JQuery Tukar fail CSS secara dinamik

Gunakan jQuery untuk menukar fail CSS secara dinamik, sama seperti penukar jQuery Stylesheet!

Berikut adalah cara menukar fail CSS secara dinamik menggunakan jQuery tulen:

kod jQuery:

Berikut memberikan tiga versi kod jQuery, dengan fungsi yang sedikit berbeza:

Versi 1: Versi yang paling mudah, secara langsung tukar atribut tag <link>. href

$(document).ready(function() {
    $("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bnav li a").click(function() {
        $("link").attr("href", $(this).attr('rel'));
        return false;
    });
});

Versi 2: versi yang lebih kompleks, gunakan plugin cookie jQuery untuk menyimpan pemilihan CSS pengguna dan simpan gaya selepas halaman disegarkan.

$(document).ready(function() {
    if ($.cookie("css")) {
        $("link").attr("href", $.cookie("css"));
    }
    $("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bnav li a").click(function() {
        $("link").attr("href", $(this).attr('rel'));
        $.cookie("css", $(this).attr('rel'), { expires: 365, path: '/' });
        return false;
    });
});

Versi 3: versi 2 yang lebih baik untuk mengurangkan kelipan semasa bertukar CSS.

if ($.cookie("css")) {
    $("link").attr("href", $.cookie("css"));
}

$(document).ready(function() {
    $("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bnav li a").click(function() {
        $("link").attr("href", $(this).attr('rel'));
        $.cookie("css", $(this).attr('rel'), { expires: 365, path: '/' });
        return false;
    });
});

kod html:

kod HTML adalah mudah, memuatkan fail CSS dan jQuery biasanya di kepala. Nota Nilai awal atribut

tag <link>. href

<link rel="stylesheet" type="text/css" href="style1.css">

• Default CSS
• Larger Text
• Something Different

Pautan ujian: (sila ganti untuk laluan sebenar anda) /path/to/

FAQs:

Berikut adalah beberapa soalan dan jawapan yang sering ditanya mengenai jQuery dan CSS:

1.

fail JavaScript boleh dimuat secara dinamik menggunakan kaedah JQuery's

. Tetapi untuk fail CSS, anda perlu membuat elemen getScript() baru dan melampirkannya ke <link> dokumen. Contohnya:

$('head').append('<link href="your-stylesheet.css" rel="stylesheet" type="text/css">');

2.

DataTables menyokong pengantarabangsaan dan boleh mengubah bahasa secara dinamik dengan menukar atribut

. Contohnya:

language.url

3.

var table = $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyTable').DataTable({
    language: {
        url: "//cdn.datatables.net/plug-ins/1.10.21/i18n/English.json"
    }
});

// 更改为法语
table.language.url = "//cdn.datatables.net/plug-ins/1.10.21/i18n/French.json";
table.ajax.reload(null, false);

Gunakan kaedah jQuery untuk mendapatkan atau menetapkan sifat gaya. Contohnya:

css() 4.

$('p').css('color', 'red');

Buat unsur -unsur baru dan dan lampirkannya ke

dokumen. Contohnya:

<link> <script></script> 5.

// 加载 CSS 文件
$('head').append('<link href="your-stylesheet.css" rel="stylesheet" type="text/css">');

// 加载 JS 文件
$.getScript("your-script.js");

plugin JQuery-Lang-JS dengan mudah boleh menterjemahkan laman web. Contohnya:

ingat untuk menggantikan laluan tempat dan nama fail ke laluan fail sebenar dan nama fail anda. Pastikan plugin cookie jQuery dan jQuery dimasukkan dengan betul.

Atas ialah kandungan terperinci JQuery Tukar fail CSS secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!