表示するページ毎にhtml上のclass名をJavaScriptで変更するには？

解決済

質問者：redhot-aky
質問日時：2008/06/06 18:49
回答数：3件

<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"

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yambejp
回答日時：2008/06/08 01:07

ごめん、中途半端だったかもしれませんね。

フルで書くとこんな感じで

<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にかえる

- 0
- 件

通報する

この回答へのお礼

無事、思い通りの結果が得られました。

てっきりhtml上の記載まで”toppage”に変わるものだと思いこんでいたので
スタイルシートまでフルで書いていただいてよかったです。
（今まではhtmlソース上の変化の確認ばっかりしてました・・・）

ありがとうございました！

通報する

お礼日時：2008/06/09 09:44

No.2

回答者： yambejp
回答日時：2008/06/06 19:25

ざっとこんな感じで？

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";
}
}

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

教えていただいた方法で現在試しているのですが
やり方がまずいのか、思うように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名を変更しているのでしょうか？

質問が続き申しわけございません。

通報する

お礼日時：2008/06/06 22:08

No.1

回答者： steel_gray
回答日時：2008/06/06 19:10

できますが、各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で書き換えたいのでしたら失礼！