ブートストラップ用CSSスタイルスイッチャー

https://www.inetsolution.com/blog/march-2010/css-style-switcher-a-quick-and-dirty-how-toに従ってスタイルスイッチャーを実装しようとしています。しかし、CSSリンクにtitle = ""を追加すると、CSSのファイルはページにロードされず、スタイルはデフォルトのブートストラップに戻ります。私の外部のCSSファイルは、本文の最後に追加されています。注文は：ブートストラップ用CSSスタイルスイッチャー

<link rel="stylesheet" href="css/bootstrap.min.css"> 
    <style> 
     body { 
      padding-top: 50px; 
      padding-bottom: 0px; 
     } 
    </style> 
<link rel="stylesheet" href="css/bootstrap-theme.min.css"> 
<link rel="stylesheet" href="css/my-styles.css"> 
<link rel="stylesheet" href="css/my-alternate-styles.css"> 
<link rel="stylesheet" href="fontello-xxxxxxxx/css/fontello.css">

私は何かがありますか？

出典

2016-12-18 pigsound

どのようなエラーが発生しますか？いくつかのjsfiddleを提供できますか？ – lomboboo

私は最初のフィドルを正しく実行しているかどうかわからないので、関連する情報を得ることができます... https://jsfiddle.net/pigsound/em37bdjj/11/ – pigsound

@pigsound私の答えを見て、私はとてもですこの特定のコードに詳しい。 – zer00ne

あなたはたぶん右のもの（1つのことを除き、以下を参照してください）を記事に書いているコードは、まっすぐ引用符 '' '' "を使用する必要があります。

<a href=”#” onclick=”setActiveStyleSheet(‘default’); return false;”>Change style to default</a> 
<a href=”#” onclick=”setActiveStyleSheet(‘alternate’); return false;”>Change style to alternate</a>

あなたがコピーして、この部分を貼り付けるのであれば、それは正しく解析されません。

<a href="#" onclick="setActiveStyleSheet('default'); return false;">Change style to default</a> 
<a href="#" onclick="setActiveStyleSheet('alternate'); return false;">Change style to alternate</a>

レビュー代わりスニペットのこのPLUNKER：これはストレート引用符で正しい方法です。複数のスタイルシートが含まれているため、スニペットは機能しません。

SNIPPET（代わりに機能はありません、レビューPLUNKER。）

<!doctype html> 
 
<html> 
 
    <head> 
 
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'> 
 
<link href='default.css' title='default' rel='stylesheet'> 
 
<link href='alt.css' title='alt' rel='alternate stylesheet'> 
 
     <style> 
 
     body { 
 
      padding-top: 50px; 
 
      padding-bottom: 0px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <section> 
 
     <p>TEST</p> 
 
     </section> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script> 
 
    <script src='styleSwitcher.js'></script> 
 
    </body> 
 
    </html>

*私はあなたが言った気づい：

...私の外部CSSファイルは一番下に追加されます体の...

<link>を<head>の中に置きます。ほとんどの場合、JavaScript/jQueryは、何かをする前に実際のDOMをロードする必要があります。だから、ほとんどの状況であなたのスタイリング（<link>と<style>）が最初に入り、<head>の中に入ることを確認することが重要です。

<script>の場合は、<body>の末尾に、終了タグ</body>の直前に配置することをお勧めします。スニペットとPLUNKER、例えば<link>、<style>、および<script>レイアウトを参照してください。

出典

2016-12-18 18:26:52 zer00ne

あなたは、あまりにも多くのスタイルシートが私のhtmlコードに関与しているという意味ですか？ページをリロードすると、1秒間正しいCSSが表示されますが、スイッチがオフになっているように見え、デフォルトのCSSが表示されます。私はすべてのCSSを頭に入れようとしましたが、まだエラーが出ています.css-linkがtitle = ""を取得すると、それは認識されません。 cssが本体の底ではなく頭に含まれている場合、カスタムCSSを1秒間表示しなくてもデフォルトのブートストラップcssが直接表示されます。あなたが追加したプランナーをレビューしました。それはクロームでは動作するようですが、Firefoxでは動作しません。 – pigsound

私はChrome、Firefox、およびEdgeをPCでテストしました。MacではChrome、Firefox、Safariでテストしました。全く問題はありません。 WordPress、Drupal、Joomla、または他のCMSを使用していますか？頭の中のすべてのスタイル、特にリンクを配置するのが一般的な方法です。いいえ、あまりにも多くのスタイルシートがあるわけではありません。 http://stackoverflow.com/a/18449119/2813224 – zer00ne

申し訳ありませんが、私は正直ではありませんでした：私はあなたのPCにfirefoxとchromeでplunkerを開き、firefoxでそれがうまくいかないことを見ました。あなたの助けと助言のおかげで、私は試しに行くつもりです。 – pigsound

ブートストラップ用CSSスタイルスイッチャー

答えて

関連する問題