- ベストアンサー
HTMLのclass名をJavaScriptで変更する方法
- 表示するページ毎にhtml上のclass名をJavaScriptで変更する方法について説明します。
- 全ページに共通で入っているHTMLのclass名を、特定のページで変更することができます。
- 具体的には、特定のURLのときにclass名を変更するJavaScriptの処理を実装します。
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （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にかえる
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
ざっとこんな感じで？ 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名を変更しているのでしょうか？ 質問が続き申しわけございません。
- steel_gray
- ベストアンサー率66% (1052/1578)
できますが、各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>の間しかいじれない状態の話しなんです。 説明不足でした、すいません。 ですが、今後の参考にさせていただきます。 ご回答ありがとうございました。
お礼
無事、思い通りの結果が得られました。 てっきりhtml上の記載まで”toppage”に変わるものだと思いこんでいたので スタイルシートまでフルで書いていただいてよかったです。 （今まではhtmlソース上の変化の確認ばっかりしてました・・・） ありがとうございました！