jQueryはCSSファイルを動的に変更します

jQueryを使用して、jQuery StyleSheetスイッチャーのようにCSSファイルを動的に変更します！

以下は、純粋なjQueryを使用してCSSファイルを動的に変更する方法です。

jqueryコード：

以下は、jQueryコードの3つのバージョンを提供し、関数はわずかに異なります。

バージョン1：

最も簡単なバージョンは、タグの属性を直接変更します。 <link> href

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

バージョン2：より複雑なバージョンでは、jQuery Cookieプラグインを使用してユーザーのCSS選択を保存し、ページの更新後にスタイルを保持します。

バージョン3：

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

バージョン2を改善して、CSSスイッチング中のちらつきを減らしました。

htmlコード：

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コードはシンプルで、CSSとjQueryファイルは通常ヘッドにロードされます。 タグの属性の初期値に注意してください。

<link>hrefテストリンク：

（実際のパスを

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

• Default CSS
• Larger Text
• Something Different

に置き換えてください）

faqs：/path/to/

以下は、jqueryとcssに関するいくつかのよくある質問と回答です。 1インターネットエクスプローラーと互換性のあるjqueryを使用して外部CSSファイルをロードする方法

JavaScriptファイルは、jQueryの

メソッドを使用して動的にロードできます。ただし、CSSファイルの場合、新しい

要素を作成して、ドキュメントのに添付する必要があります。たとえば、

getScript() 2。 <link>

DatAtablesは国際化をサポートし、$('head').append('');

3。

language.url jQueryの

メソッドを使用して、スタイルのプロパティを取得または設定します。たとえば、

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

css()新しい

および

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

要素を作成し、ドキュメントの

に添付します。たとえば、

<link><script></script> jQuery-lang-jsプラグインは、ウェブサイトを簡単に翻訳できます。たとえば、

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

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

プレースホルダーパスとファイル名を実際のファイルパスとファイル名に置き換えることを忘れないでください。 jqueryとjqueryのクッキープラグインが正しく含まれていることを確認してください。

以上がjQueryはCSSファイルを動的に変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。