JQuery ändern die CSS -Datei dynamisch

Verwenden Sie JQuery, um CSS -Dateien dynamisch zu ändern, genau wie ein JQuery -Stylesheet -Switcher!

Folgendes ist, wie CSS -Dateien dynamisch mit Pure JQuery:

dynamisch geändert werden können:

JQuery Code:

Folgendes enthält drei Versionen von JQuery Code mit etwas unterschiedlichen Funktionen:

Version 1: <link> Die einfachste Version ändern Sie direkt das href -Merkmal des

-Tag.

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

Version 2:

komplexere Version, verwenden Sie das JQuery Cookie -Plugin, um die CSS -Auswahl des Benutzers zu speichern und den Stil nach dem Aktualisieren der Seite zu behalten.

$(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:

Verbesserte Version 2, um das Flackern während des CSS -Schaltes zu reduzieren.

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

HTML -Code:

<link> HTML -Code ist einfach und lädt CSS und JQuery -Dateien normalerweise im Kopf. Beachten Sie den Anfangswert des href -attributs des

-Tags.

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

• Default CSS
• Larger Text
• Something Different

Testverbindung: /path/to/ (Bitte ersetzen Sie

für Ihren tatsächlichen Pfad)

FAQs:

Folgendes sind einige häufig gestellte Fragen und Antworten zu JQuery und CSS:

1.

getScript() JavaScript -Dateien können dynamisch mit der <link> -Methode von JQuery geladen werden. Für CSS -Dateien müssen Sie jedoch ein neues Element erstellen und an das

des Dokuments anhängen. Zum Beispiel:

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

2.

language.url DataTables unterstützt die Internationalisierung und kann die Sprache dynamisch ändern, indem das Attribut

geändert wird. Zum Beispiel:

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.

css() Verwenden Sie die

-Methode von JQuery, um Style -Eigenschaften zu erhalten oder festzulegen. Zum Beispiel:

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

4.

<link> Erstellen Sie neue Elemente <script></script> und und legen Sie sie an

des Dokuments an. Zum Beispiel:

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

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

5.

jQuery-Lang-js-Plugin kann Websites problemlos übersetzen. Zum Beispiel:

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

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

Denken Sie daran, den Platzhalterpfad und den Dateinamen in Ihren tatsächlichen Dateipfad und Dateinamen zu ersetzen. Stellen Sie sicher, dass die JQuery- und JQuery Cookie -Plugins korrekt enthalten sind.

Das obige ist der detaillierte Inhalt vonJQuery ändern die CSS -Datei dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!