2017-04-13 3 views
2

私はウェブ開発に全く新しいので、CSSに関する基本的な質問があります。ウェブページのURLに合わせてCSSを適用できますか?

URLに固有のWebページにCSSスタイルを適用できますか?

私は、CSSにはJavascriptのような条件はありませんが、スマートな方法があるかどうかを確認することができます。または、それはすべて可能ではありません。

if (window.location.href.indexOf("webpage1.com") > -1) { 
................. 
................... 
................ 
} 

は、我々は、同様CSSと似た何かを行うことができます:あなたは、次のような何かをJavaScriptで例えば

私に貴重な提案をしてください。

+0

なぜ私が否定的な投票になったのかを知ることはできません。私はすでに述べたように、それは不可能ですが、それを行うためのスマートな方法があるかどうかをチェックするだけです。 –

+0

に返信する前に完全に質問を読んでください。あなたがしたいことがあれば、URLに基​​づいて別のスタイルシートを読み込むことができます。あなたのスクリプトでリンクタグを頭に付けるだけです。 – charlietfl

答えて

1

いいえ、CSSには、埋め込まれているページのURLを読み取ることができません。

ページを一意に識別するには、通常、をhtmlまたはbody要素に追加します。

+0

@camccar - 私はあなたがHTMLクラスを意味すると思っていますが、そうではありませんが、CSSでそれを行うことはできません。プログラミング言語が必要です。 – Quentin

0

ページのURLとCSSを接続することはできませんが、あなたはあなたのページのHTML要素にクラスまたはIDを追加することができます

HTML:

<html class="subpage"> 

CSS:

.subpage{ add some rules } 

HTML:

<html class="main"> 

CSS:

.main{ add some different rules} 
+0

ご返信ありがとうございます。 HTMLコードを編集するためのアクセス権がありません。カスタムのCSSまたはjsスクリプトのみを外部に追加できます。基本的にはwordpressのようなウェブサイトです。 –

0

その可能性あなたのコンテンツがロードされる後にスクリプトを実行している気にしない場合。

スクリプトはホスト名を取得し、classNameとして使用して、特定のURLに基​​づいてスタイルを変更したい要素にアタッチすることができます(ただし、スタイルはあらかじめ定義されています)。例:

更新するスタイルが多い場合

HTML

<div id="main">Hello World</div> 
... 
... 
... 
<script>document.getElementById("main").className = window.location.hostname.split('.').join('-')</script> 

CSS

#main { 
color : red; 
} 
#main.fiddle-jshell-net { 
    color : green; 
} 
#main.google-net { 
    color : black; 
} 

fiddle

0

を参照してください - それは完全に追加する価値があるだろうという程度に新しいスタイルシートをカスケードの最下部に追加 - 単純に:

  • 新しいスタイルシートを作成します(など)。extra-styles.css
  • 条件が真の場合は、DOM

例:にそのスタイルシートへの参照を追加します。

if (window.location.href.indexOf('page1') > -1) { 

    var extraStyles = document.createElement('link'); 
    extraStyles.setAtttribute('rel', 'stylesheet'); 
    extraStyles.setAtttribute('href', '/path/to/extra-styles.css'); 
    document.head.appendChild('extraStyles'); 

} 
関連する問題