JavaScriptを使用していますか？

私はsepereateページを持っています。ユーザーはボタンをクリックしてWebサイトのスタイルシートを変更することができます。これにより、各ページのすべてのスタイルシートが選択したスタイルシートに変更されます。JavaScriptを使用していますか？

外部JavaScriptファイル：ユーザーがボタンをクリックしたときのための

 function ChangeSheet(sheet) 
    { 

     document.getElementById('pagestyle').setAttribute('href', sheet); 

    } 


    pages = { 

     default : 0; 
     design1 : 0; 
     design2 : 0; 


    } 

    function setDefault(var num){ 

     pages.default = num; 
    }

HTMLコードは、CSSを変更するには：

<p>Click one of the links to change the website design viewing settings.</p> 

      <button onclick="setDefault(1)">Default</button>

ナンバー1は、ユーザはこの1つを選んだことを意味し、ページクラス内に保存されます。基本的にブール。

htmlファイルに埋め込まれたJavascriptを使用すると、外部のjavascriptファイルをインポートするだけでなく、リンクIDも表示されます。ではない私は、ボタンを押すと、しかし、何も起こりません

<link id = "pagestyle" rel="stylesheet" type="text/css" href="default.css"> 

    <script src= "swap.js"></script> 

    <script type="text/javascript"> 
     if(pages.default == 1) 
     { 
      ChangeSheet('design1.css'); 

     } 

    </script>

、およびIM：私は、もしそうなら、私たちは「design1.css」をスタイルシートへの変更、pages.deafultが1であるかどうかを確認するためにinternelのJSを使用してみてください確かになぜ？申し訳ありませんが、私は非常にウェブサイトのデザインとJavaScriptに新しいです。

出典

2017-04-22 Anonymous

あなたの 'if（）'はページの読み込み時にのみ実行されます。あなたのボタンで 'default'を変更しただけなので、もう一度実行するつもりはありません。また、javascriptにはページ読み込み間に永続性がありません。そのオブジェクトをどこかに保存する必要があります... server、cookie、またはlocalStorage – charlietfl

ボタンをクリックする前にjavascriptでpages.defaultが1に等しいかどうかチェックしています。ボタンをクリックすると、pages.defaultを1に変更しますが、もう一度チェックを行いません。 –

私はあなたのアップデートに対処するために私の答えを更新しました。（これは、ページロードの間に永続性が必要であるというcharlieftlの要点をエコーしますが、ファイルシステムから直接HTMLとJSを実行している場合でも解決策を提供します） – nb1987

-1

問題は、埋め込みスクリプトが、ページが読み込まれたとき（またはドキュメントの<head>に配置されているように見えるため、ページが読み込まれる前でも）すぐに実行されることです。そして、その時点でpages.defaultは1に等しくないので、何も起こりません。修正するには、単にChangeSheetを呼び出すためにあなたのクリックハンドラを更新できます。

<button onclick="ChangeSheet('design1.css')">Default</button>

編集：私はあなたの更新を参照してください。コメント内で言及された別のユーザーとして、ユーザーの好みのスタイルシートを保存するために、ある種の永続化メカニズムを使用する必要があります。しかし、YouTubeのビデオでこのチュートリアルを実行している場合は、おそらくあなたのローカルファイルシステム（file:///プロトコル）からHTMLとJavaScriptを実行しているので、おそらくあなたはクッキーまたはlocalStorageを使用することはできませんし、ユーザーの設定を保存するサーバーがあります。永続性のオプションは極端に制限されていますが、は、window.nameプロパティを使用して一部のデータを保持します（Javascript/HTML Storage Options Under File Protocol (file://)参照）。これはではなく、のベストソリューション（ハックのようなもの）ですが、あなたの例ではおそらく唯一のものです。

HTML（および組み込みJS）：

<!doctype html> 
<html> 
<head> 
    <link id = "pagestyle" rel="stylesheet" type="text/css" href="default.css"> 
    <script src="./swap.js"></script> 
    <script type="text/javascript"> 
     if (window.name) { 
      ChangeSheet(window.name); 
     } 
    </script> 
</head> 
<body> 
    <button onclick="ChangeSheet('design1.css')">Design 1</button> 
    <button onclick="ChangeSheet('design2.css')">Design 2</button> 
</body> 
</html>

swap.js：

function ChangeSheet(sheet) 
{ 
    window.name = sheet; 
    document.getElementById('pagestyle').setAttribute('href', sheet); 

}

design1.css（もちろん、あなたが好きなスタイルに変更することができます）：

body { 
    background-color: blue; 
}

design2.css（任意のスタイルに変更できます）：

body { 
    background-color: red; 
}

スタイルを設定した後で、ページを更新してスタイル設定を維持するか、読み込む別のページがある場合は、それらの間を行き来することができます。

出典

2017-04-22 17:10:59 nb1987

ありがとう、私は以前にこの方法を試みましたが、。名。時間と指導をありがとう。 –

おそらく、linkタグの属性を変更する代わりに、特定のクラスをbodyタグに設定するだけでよい場合があります。

あなたのCSSテーマの大きさはどれくらいですか？私はCSSのテーマを追加したCSSを最大5〜10KB追加することは、最近の悪い習慣だとは思わない。

body classNameを変更することで、上記のようなハッキーなソリューションに頼る必要はありません。

出典

2017-04-22 17:12:17 Denialos

外部ファイルを使用する必要がある場合は、クライアント側に送信するため、外部ファイルをサーバーに添付するため、クライアント側でスタイルを変更する最善の方法が再度ロードされるまで変更されません。 JavaScript関数自体で値を変更するか、ページをリロードしてみてください。

出典

2017-04-22 18:36:39 Osama

JavaScriptを使用していますか？

答えて

関連する問題