jQuery modifie le fichier CSS dynamiquement

Utilisez jQuery pour modifier dynamiquement les fichiers CSS, tout comme un commutateur de feuille de style jQuery!

Ce qui suit est de savoir comment modifier dynamiquement les fichiers CSS à l'aide de Pure jQuery:

Code jQuery:

Les suivants fournissent trois versions de JQuery Code, avec des fonctions légèrement différentes:

Version 1: La version la plus facile, modifie directement l'attribut <link> de la balise href.

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

Version 2: Version plus complexe, utilisez le plugin jQuery Cookie pour enregistrer la sélection CSS de l'utilisateur et conserver le style après la rafraîchissement de la page.

$(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;
    });
});

Version 3: Amélioration de la version 2 pour réduire le scintillement pendant la commutation 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;
    });
});

CODE HTML:

Le code HTML est simple, chargeant normalement des fichiers CSS et JQuery dans la tête. Remarquez la valeur initiale de l'attribut <link> de la balise href.

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

• Default CSS
• Larger Text
• Something Different

Lien de test: (veuillez remplacer /path/to/ pour votre chemin réel)

FAQS:

Voici quelques questions et réponses fréquemment posées sur JQuery et CSS:

1.

Les fichiers JavaScript peuvent être chargés dynamiquement à l'aide de la méthode getScript() de JQuery. Mais pour les fichiers CSS, vous devez créer un nouvel élément <link> et le joindre au du document. Par exemple:

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

2.

DataTables prend en charge l'internationalisation et peut modifier la langue dynamiquement en modifiant l'attribut language.url. Par exemple:

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);

3.

Utilisez la méthode css() de jQuery pour obtenir ou définir les propriétés de style. Par exemple:

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

4.

Créez des éléments nouveaux <link> et <script></script> et joignez-les à du document. Par exemple:

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

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

5.

Le plugin jQuery-Lang-JS peut facilement traduire les sites Web. Par exemple:

var lang = new Lang('en');
lang.dynamic('fr', 'path/to/fr.json');

// 更改为法语
lang.change('fr');

N'oubliez pas de remplacer le chemin d'accès et le nom du fichier sur l'espace réservé sur votre chemin de fichier et le nom de fichier réel. Assurez-vous que les plugins JQuery et JQuery sont correctement inclus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!