<div class="default">テキスト内容</div>
上記のようなHTMLが、全ページに共通で入っているという前提で
『http://www.アドレス.com/』を表示している時のみ
<div class="toppage">テキスト内容</div>
と、言うようにclass名を
JavaScriptで変更する事は可能でしょうか?
■例:
http://www.アドレス.com/ → class="toppage"
http://www.アドレス.com/contact/ → class="default"
http://www.アドレス.com/company/ → class="default"
No.3ベストアンサー
- 回答日時:
ごめん、中途半端だったかもしれませんね。
フルで書くとこんな感じで
<style>
.toppage{
color:red;
}
.default{
color:blue;
}
</style>
<script>
window.onload=function(){
var path=location.pathname;
if(path=="/"){
var tags=document.getElementsByTagName("div");
for(var i=0;i<tags.length;i++){
if(tags[i].className=="default") tags[i].className="toppage";
}
}
}
</script>
<div class="default">テキスト内容</div>
ちなみに解説すると
var path=location.pathname;
→自分自信のURLのパス部分をもとめる
if(path=="/"){
→パスが「/」(ということはルート=インデックスページ)のとき・・・
var tags=document.getElementsByTagName("div");
→ページないのdivタグを全部あつめてきて頭から0,1,2という序数のつく
配列(tags[0],tags[1]・・・)におさめる
for(var i=0;i<tags.length;i++){
→順番にチェック
if(tags[i].className=="default") tags[i].className="toppage";
→もしi番目のタグのクラス名がdefaultだったら
そのタグのクラス名をtoppageにかえる
無事、思い通りの結果が得られました。
てっきりhtml上の記載まで”toppage”に変わるものだと思いこんでいたので
スタイルシートまでフルで書いていただいてよかったです。
(今まではhtmlソース上の変化の確認ばっかりしてました・・・)
ありがとうございました!
No.2
- 回答日時:
ざっとこんな感じで?
var path=location.pathname;
if(path=="/"){
var tags=document.getElementsByTagName("div");
for(var i=0;i<tags.length;i++){
if(tags[i].className=="default") tags[i].className="toppage";
}
}
ご回答ありがとうございます。
教えていただいた方法で現在試しているのですが
やり方がまずいのか、思うようにclass名が変わってくれません。
以下、わからないなりに解釈してみました。
1| var path=location.pathname;
2| if(path=="/"){
3| var tags=document.getElementsByTagName("div");
4| for(var i=0;i<tags.length;i++){
5| if(tags[i].className=="default") tags[i].className="toppage";
6| }
7| }
1| URLを取得
2| 取得したURLが「http://www.アドレス.com/」の場合
3| ページ内のdiv
4| 全てを
5| ??
この5行目の動きの意味が理解できませんでした・・・
どこでhtml内のclass名を変更しているのでしょうか?
質問が続き申しわけございません。
No.1
- 回答日時:
できますが、各htmlのbodyにidでも付けておいた方がなにかと便利だと思います。
/index.html → <body id="toppage">
/contact/index.html → <body id="contact">
/company/index.html → <body id="company">
cssファイル
#toppage .toppage {
class="toppage" に書きたい内容
}
#contact .toppage,
#company .toppage {
class="default" に書きたかった内容
}
一部のbodyにだけidを振って次のように書きわける事も。
.toppage {
}
#xxx .toppage {
}
もっと色々理由があってjavascriptで書き換えたいのでしたら失礼!
そうなんです、<body>~</body>の間しかいじれない状態の話しなんです。
説明不足でした、すいません。
ですが、今後の参考にさせていただきます。
ご回答ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
最近、HTMLのヘッダーをIDで定...
-
個別にリンクの色を変える方法
-
idの中のid指定
-
liリストタグの背景色に色がつ...
-
HTML要素のid/class名の長さに...
-
CSSの適用を一部だけ除外したい。
-
CSSで背景画像をランダムに同画...
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
リストの数字のフォントサイズ...
-
smallにtext-allignが効かない
-
Macで画像の切り抜きできないの?
-
W3Cのソースコードの検証サービ...
-
含む含まないという概念自体の...
-
定義リストに下線をつけたいと...
-
html/cssの、navを2段にする...
-
htmlのolやulなどlistにtitleや...
-
NからZへの全単射を具体的に構...
-
CSS:liで作成したメニュー...
-
改行ほどは行かないけど、若干...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
CSSのクラス名・ID名の指定でワ...
-
htmlのid属性って必要なの?
-
個別にリンクの色を変える方法
-
サイトにjQueryが使用されてい...
-
最近、HTMLのヘッダーをIDで定...
-
<span>で2重にかけているものを...
-
外部css定義したclassをht...
-
子孫セレクタの読み方をおしえ...
-
CSSに同じclass名がいっぱい‥。...
-
liリストタグの背景色に色がつ...
-
【VBA/HTML】IE画面内のページT...
-
「目次」と「サブ目次」のスタ...
-
CSS, リンクの色を一部変えるに...
-
リンク文字の 一部だけ色を変...
-
ページの左右の余白(枠外)に...
-
divでくくった中の要素にa link
-
透過背景を解除するにはどうす...
-
brにクラスをつけてcssでdispla...
おすすめ情報