BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] cssファイルをオンザフライで置き換える（そして新しいスタイルをページに適用する）。

2023-05-04 22:40:32

質問

私は、あるページで <link> という名前の CSS を読み込むヘッダがあります。 light.css . という名前のファイルも持っています。 dark.css . 私は、ページのスタイルをすべて一緒に交換するボタンが必要です（CSSファイルで使用されている40のセレクタがあり、いくつかは2つのファイルで一致しません）。

への参照を削除するにはどうすればよいですか？ light.css への参照を JS で取り除き、適用されているスタイルをすべて削除してから dark.css を読み込んで、そこからすべてのスタイルを適用するのですか？スタイルの一部は異なるcssファイルを通して適用され、一部はJSによって動的に生成されるため、私は単純にすべての要素をリセットすることはできません。ページを再読み込みすることなく、それを行うための簡単で効果的な方法はありますか？バニラJSが望ましいですが、私はとにかく後の処理にjQueryを使用するので、jQも大丈夫です。

どのように解決するのですか？

新しいリンクを作成し、古いリンクを新しいリンクに置き換えることができます。 関数に入れれば、必要な場所で再利用することができます。

ジャバスクリプトが 

function changeCSS(cssFile, cssLinkIndex) {

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}

HTMLのことです。 

<html>
    <head>
        <title>Changing CSS</title>
        <link rel="stylesheet" type="text/css" href="positive.css"/>
    </head>
    <body>
        <a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a> 
        <a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
    </body>
</html>

簡単のために、インラインのjavascriptを使用しました。 実運用では、控えめなイベントリスナーを使用したいと思うでしょう。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します